Question

我在div里面有一个复选框。

<div id="question_text_1">
  <input type="checkbox" onChange="myFunction(question_text_1)">Sample question text
</div>

每当选中或取消选中复选框时，我都会尝试切换div的背景颜色，这不起作用。

以下是complete code

但是，在没有切换逻辑的情况下实现相同的代码工作正常 - link

请建议可能出现的问题。

Answer 1

问题是x.style.backgroundColor只有在设置为内联样式时才会返回颜色值。它将返回rgb，而不是十六进制。您最好根据复选框的checked属性进行验证：

<div id="question_text_1">
    <input type="checkbox" onChange="myFunction(question_text_1, this)">Sample question text
</div>

function myFunction(x, _this) {
    x.style.backgroundColor = _this.checked ? '#0000FF' : '#FF0000';
}

http://codepen.io/anon/pen/avLrze

Answer 2

代码不起作用，因为x.style.backgroundColor总是返回'' - 空字符串和else块被执行。

要获取值，请参阅How to get an HTML element's style values in javascript?

您可以使用CSS实现此目的，无需使用Javascript

将与label元素
选中复选框时，使用复选框的:checked属性来应用样式
使用相邻的兄弟选择器（+），在选中的复选框上设置标签上的样式

＆＃13;

:checked + label {
  color: green;
  font-weight: bold;
}

＆＃13;

<div id="question_text_1">
  <input type="checkbox" id="check1">
  <label for="check1">Sample question text</label>
</div>

＆＃13;

如果您想使用Javascript，请使用classList

创建一个具有所需样式的类，以便在选中时应用
使用!important覆盖类中的样式，因为id选择器具有更高的特异性
使用classList.toggle切换课程

Updated Pen

＆＃13;

function myFunction(x) {
  x.classList.toggle('blue');
}

＆＃13;

#question_text_1 {
  background-color: #FF0000;
  padding: 7px;
  margin: 7px;
}
.blue {
  background-color: #00f !important;
}

＆＃13;

<div id="question_text_1">
  <input type="checkbox" onChange="myFunction(question_text_1)">Sample question text
</div>

＆＃13;

Answer 3

请更改下面的代码，工作正常

<div id="question_text_1">
  <input type="checkbox" onChange="myFunction(question_text_1,this)">Sample question text
</div>

 function myFunction(x,y) {
  if (y.checked)
      x.style.backgroundColor = '#0000FF';
  else
      x.style.backgroundColor = '#FF0000';
}

你不能直接比较div背景颜色和颜色值，因为你必须要声明与不同浏览器相关的颜色变量对于那次访问这个链接 How to compare a backgroundColor in Javascript?

Answer 4

如果条件使用 window.getComputedStyle（x）.backgroundColor ，则使用 x.style.backgroundColor ，而不是与'rgb'等效的颜色进行比较。

function myFunction(x) {
 if (window.getComputedStyle(x).backgroundColor == "rgb(255, 0, 0)") {
    x.style.backgroundColor = '#0000FF';
 } else if (window.getComputedStyle(x).backgroundColor == "rgb(0, 0, 255)"){
    x.style.backgroundColor = '#FF0000';
 }
}

希望这有帮助。

由于

Answer 5

你可以像这样尝试jQuery：

<强> HTML

<input type="checkbox" id="my_checkbox"/>
<div id="toggle_color">Color Will change here</div>

<强>的jQuery

jQuery(document).ready(function($){
    $('#my_checkbox').on('change', function(){
        if($(this).is(':checked')){
           $("#toggle_color").css('background-color',"red");
        } else {
            $("#toggle_color").css('background-color',"#fff");
        }
    })
})

结帐jsfiddle。

Javascript：onClick复选框更改div颜色

5 个答案: