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

小提琴：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"/>

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

Answer 2

问题在

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

您正在选择 ID 为 .bubble 的元素（bubble 是一个类）

将其更改为并检查：

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

Answer 3

试试这个代码

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

查询

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

Answer 4

首先，您为 div 上的 click 事件附加一个事件处理程序，其类为“bubble”。然后，您使用 document.getElementById 方法选择一个元素，但您使用该元素的类而不是 ID 作为参数。

为此，您需要将单击事件处理程序附加到复选框元素。像这样的东西：

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

Answer 5

替换 var el = document.getElementById(".bubble"); el.onclick = 泡泡颜色；

和

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

应该管用。