Javascript CSS并没有通过在HTML中调用JS而改变

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

#6




回答一个问题

回答二

回答三个问题

期望输出：

当有人同时选中复选框1和复选框2时，#6背景应为红色

问题:

代码似乎不起作用

有什么帮助吗？

问题在

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

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

将其更改为并检查：

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

---

我假设您正在使用jquery（因为您正在使用jquery更改css）

您在问题中描述的行为意味着更改复选框会触发验证，那么为什么要将bubbleColor函数附加到单击.bubble div上呢

试着这样做：

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

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

当然，理想情况下，如果取消选中以下复选框，则应更改函数以删除红色：

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

小提琴：

编辑： 如果要确保用户仅选择1个选项，则应使用单选按钮而不是复选框，因为这是默认行为：

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

---

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

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

为此，您需要将click事件处理程序附加到复选框元素。 大概是这样的：

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

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

---

替换var el=document.getElementById（“.bubble”）； el.onclick=气泡颜色

与

$（“.bubble”）。单击（bubbleColor）

应该有用。

试试这个代码

HTML

---

感谢您的帮助，但不幸的是，这不起作用：（是的，它起作用了。当您更改。按建议将气泡改为圆圈，然后选中前两个复选框，背景变为红色。可以缩短为…：）谢谢您的帮助！基本上，这不是为了验证目的。这是一种警告用户的警报。实际上有10个复选框，我必须确保如果选择了前2个，则气泡背景应为红色。我建议使用同名单选按钮，我将使用此选项编辑答案suggestion@cernunnos：用户应选择多个选项，这就是我选择复选框的原因。