单击复选框时如何更改按钮的颜色答案

【问题标题】：How to change the Color of the button When click the Checkbox单击复选框时如何更改按钮的颜色
【发布时间】：2016-12-21 12:04:02
【问题描述】：

这里有一个按钮和两个复选框。我想做的是，当我点击任何复选框时，Button color 应该变为绿色或任何其他颜色。如果我取消选中所有框，按钮颜色应变为灰色。请帮我。谢谢。

.input {
  font-weight: bold;
  border-radius: 1px;
  background-color: grey;
}

<input id="input" class="" value=" ... " type="button">

<input type="checkbox" class="check-box">
<input type="checkbox" class="check-box">
<input type="checkbox" class="check-box">

【问题讨论】：

标签： javascript html css

【解决方案1】：

如果我使用多个按钮，代码应该是什么？

复选框 1 --> 按钮 1

复选框 2 --> 按钮 2

        var elems = document.querySelectorAll('.check-box');
        var btn = document.querySelector('.btn-categ1');
        [].forEach.call(elems, function(el) {
          el.addEventListener('change', function() {
            var checked = document.querySelectorAll('.check-box:checked');
            if (checked.length) {
              btn.style.backgroundColor = '#A6EBF2';
            } else {
              btn.style.backgroundColor = '';
            }
          });
        });

【讨论】：

【解决方案2】：

只是为了好玩，这是一个纯 CSS 的解决方案：

#input {
  font-weight: bold;
  border-radius: 1px;
  background-color: grey;
  float:left;
}
input:checked ~ #input {
  background:green;
}

<input type="checkbox" class="check-box">
<input type="checkbox" class="check-box">
<input type="checkbox" class="check-box">

<input id="input" class="" value=" ... " type="button">

【讨论】：

【解决方案3】：

稍微详细说明 Rayon 的出色答案并使其更具活力。例如，您可以使用数据属性来指定按钮的颜色

<input type="checkbox" class="check-box" data-color="green">
<input type="checkbox" class="check-box" data-color="blue">

然后你需要另一个颜色变量

var colour = checked.dataset.color;
if (checked.length) {
   btn.style.backgroundColor = colour;
} else {
   btn.style.backgroundColor = '';
}

【讨论】：

【解决方案4】：

这是一个仅使用纯 javascript（无 jquery）的示例：

var button = document.getElementById("mybtn");
var chkbox = document.getElementsByClassName("chkbox");

function onChangeListener() {
    button.style.backgroundColor = "gray";
    for (var i = 0; i < chkbox.length; i++) {
        if (chkbox[i].checked) {
            button.style.backgroundColor = "green";
        }
    }
}

for (var i = 0; i < chkbox.length; i++) {
    var checkbox = chkbox[i];
    checkbox.addEventListener("change", onChangeListener);
}

<input type="button" id="mybtn" value=" . . . " style="background-color: gray;"> 

<input type="checkbox" class="chkbox">
<input type="checkbox" class="chkbox">
<input type="checkbox" class="chkbox">

在这里提琴：https://jsfiddle.net/avh4dsnm/1/

【讨论】：

这对我也有帮助。非常感谢

【解决方案5】：

使用document.querySelectorAll选择元素
使用.check-box:checked选择checked元素[:checked]

var elems = document.querySelectorAll('.check-box');
var btn = document.querySelector('.btn-elem');
[].forEach.call(elems, function(el) {
  el.addEventListener('change', function() {
    var checked = document.querySelectorAll('.check-box:checked');
    if (checked.length) {
      btn.style.backgroundColor = 'green';
    } else {
      btn.style.backgroundColor = '';
    }
  });
});

<input class="btn-elem" value="  ...  " style="font-weight: bold; border-radius: 1px; background-color: grey;" type="button">

<input type="checkbox" class="check-box">
<input type="checkbox" class="check-box">
<input type="checkbox" class="check-box">

【讨论】：

这非常好。它工作完美。感谢您的努力。