CSS не меняется при вызове JS в HTML

Question

CSS не меняется при вызове JS в HTML

0

мой JS-код ниже:

// JavaScript Document

function bubbleColor() {

    if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked")) 
    {
        $(".bubble").css("background-color", "red");

    }
}
var el = document.getElementById(".bubble");
el.onclick = bubbleColor;

И мой целевой HTML:

       <div id="circle" class="bubble">
                    <p class="circle_text">

                        #6

                    </p>
                </div>

 <br/><br/>

        <input type="checkbox" value="1" id="Checkbox1" name="Checkbox1"/> Answer one <br/>
        <input type="checkbox" value="1" id="Checkbox2" name="Checkbox2"/> Answer two <br/>
        <input type="checkbox" value="1" id="Checkbox3" name="a3"/> Answer three <br/>

Желаемый результат:

Когда кто-то проверяет [выбирает] флажок и флажок2, фон # 6 должен быть красного цвета.

Проблема:

Код, похоже, не работает.

Любая помощь, пожалуйста?

Mohammad Khalid Masud 24 сен. 2013, в 12:34

Источник

Теги:

javascript

html

css

jquery-ui

dom

5 ответов

Ещё вопросы

cernunnos · Answer 1 · 2013-09-24T07-42-00.000Z

Я предполагаю, что вы используете jquery (поскольку вы меняете css с jquery)

Поведение, которое вы описываете в своем вопросе, подразумевает, что изменение флажка должно инициировать проверку, так почему вы присоединяете функцию bubbleColor к нажатию на div.bubble?

Попробуйте что-то вроде этого:

// Alternatively you could use a class to select the checkboxes
$("input[type='checkbox']").change(bubbleColor);

Разумеется, вы должны изменить свою функцию, чтобы удалить красный цвет, если вы снимите флажки:

function bubbleColor() {
  if ($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked")) {
    $(".bubble").css("background-color", "red");
  } else {
    $(".bubble").css("background-color", "transparent");
  }
}

Скрипт: http://jsfiddle.net/sQCcF/2/

Edit: Если вы хотите, чтобы пользователь выбирал только один вариант, вы должны использовать радиокнопки вместо флажков, так как это поведение по умолчанию:

<input type="radio" name="inputname" value="1"/>
<input type="radio" name="inputname" value="2"/>
<input type="radio" name="inputname" value="3"/>

Имя должно быть одинаковым для входов, но каждый из них будет иметь другое значение, при этом один из них автоматически отменит выбор другого.

Можно сократить до этой скрипки ... :)
Спасибо за вашу помощь! По сути, это не для целей проверки. Это своего рода предупреждение, которое предупреждает пользователя. На самом деле есть 10 флажков, и я должен убедиться, что если первые 2 выбраны, то фон пузырька должен быть красного цвета.
Я бы предложил вместо этого использовать радио-кнопки с тем же именем, но я не буду редактировать ответ с этим предложением.
@cernunnos: пользователь должен выбрать несколько вариантов, поэтому я выбираю флажок.

Hari · Answer 2 · 2013-09-24T09-23-00.000Z

Попробуйте этот код

HTML

<div id="circle" class="bubble">
 <p class="circle_text">
     #6
 </p>
</div>
<br/><br/>
<input type="checkbox" value="1" id="Checkbox1" name="Checkbox1" class="chBox"/> Answer one <br/>
<input type="checkbox" value="1" id="Checkbox2" name="Checkbox2" class="chBox" /> Answer two <br/>
<input type="checkbox" value="1" id="Checkbox3" name="a3" class="chBox" /> Answer three <br/>

Jquery

$(document).ready(function(){
    // you can use '.chBox class or input[type='checkbox']'
    $('.chBox').bind('click', function(){
        if($("#Checkbox1").is(":checked") && $("#Checkbox2").is(":checked")) 
        {
            $(".bubble").css("background-color", "red");
        }else{
            $(".bubble").css("background-color", "#fff");
        }    
    });
});

Ganesh Pandhere · Answer 3 · 2013-09-24T09-19-00.000Z

Проблема в

var el = document.getElementById(".bubble");

Вы выбираете элемент с идентификатором.bubble (пузырь - это класс)

Измените его и проверьте:

var el = document.getElementById("circle");

Спасибо за вашу помощь, но, к сожалению, это не работает :(
Да, это работает. Когда вы изменяете .bubble на кружок, как это было предложено, а затем устанавливаете 2 первых флажка, фон становится красным.

Riad · Answer 4 · 2013-09-24T09-15-00.000Z

Заменить var el = document.getElementById(". Bubble"); el.onclick = bubbleColor;

с

$ (". bubble"). click (bubbleColor);

должно сработать.

Valentin S. · Answer 5 · 2013-09-24T07-48-00.000Z

Прежде всего, вы присоединяете обработчик событий для события click на div с классом "bubble". Затем вы используете метод document.getElementById для выбора элемента, но вы используете в качестве аргумента класс этого элемента, а не идентификатор.

Для этого вам нужно прикрепить обработчик события клика к элементам флажка. Что-то вроде этого:

$('input[type="checkbox"]').click(function() {
    bubbleColor();
});