Javascript: onClick 复选框改变 div 颜色

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 总是 returns ''- 空字符串和 else 块被执行。

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

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

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

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

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

如果要使用Javascript，请使用classList

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

Updated Pen

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

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

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

Answer 2

你可以像这样用 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。

Answer 3

问题是 x.style.backgroundColor 只有在设置为内联样式时才会 return 颜色值。它会 return 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 4

在 if 条件中使用 x.style.backgroundColor 而不是 window.getComputedStyle(x).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

请像下面这样更改您的代码，它工作正常

<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 背景颜色和颜色值，因为你必须声明与不同浏览器相关的颜色变量为此访问此 link How to compare a backgroundColor in Javascript?

Javascript: onClick 复选框改变 div 颜色

Javascript: onClick checkbox change div color

html

javascript

checkbox

onclick