javascript - 单击复选框时如何更改按钮的颜色

Question

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

.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">

Answer 1

• 使用 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">