javascript - CSS 并没有通过在 HTML 中调用 JS 来改变

Question

我的 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/>

期望的输出:

当有人选中 [选择] Checkbox1 和 Checkbox2 时，#6 背景应该是红色。

问题:

代码似乎不起作用。

有什么帮助吗？

Answer 1

我假设您正在使用 jquery(因为您正在使用 jquery 更改 css)

您在问题中描述的行为暗示更改复选框应该触发验证，那么为什么要将 bubbleColor 函数附加到单击 .bubble div？

尝试这样的事情:

// 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");
  }
}

fiddle :http://jsfiddle.net/sQCcF/2/

编辑: 如果您想要确保用户只选择 1 个选项，那么您应该使用单选按钮而不是复选框，因为这是默认行为:

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

输入的名称必须相同，但每个输入都有不同的值，选择一个将自动取消选择另一个。