Javascript：onClick复选框更改div颜色答案

【问题标题】：Javascript: onClick checkbox change div colorJavascript：onClick复选框更改div颜色
【发布时间】：2016-01-14 18:18:29
【问题描述】：

我在 div 中有一个复选框。

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

我正在尝试切换div的背景颜色，只要检查或未选中，都没有工作。

这里是complete code

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

请提出可能出现的问题。

【问题讨论】：

标签： javascript html checkbox onclick

【解决方案1】：

问题是x.style.backgroundColor 只有在设置为内联样式时才会返回颜色的值。它会返回 rgb，而不是 hex。您最好根据复选框的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

【讨论】：

【解决方案2】：

代码不起作用，因为x.style.backgroundColor 总是返回''- 空字符串并且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

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

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>

【讨论】：

【解决方案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?

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

在 if 条件下使用 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';
 }
}

希望这会有所帮助。

谢谢

【讨论】：

您不认为这将是一项昂贵的操作吗？
这可能很慢，但在大多数情况下都适用于纯 JavaScript。如果您可以使用 jQuery - 使用 .css 属性。检查此链接以了解性能jsperf.com/getcomputedstyle-vs-style-vs-css/2
this.checked 怎么样？
可以的。我们需要有条件函数来在选中时更改背景颜色。但问题是关于什么可以用来代替 style.backgroundColor 所以我给出了 window.getComputedStyle 的选项。