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选择元素
使用itertools.product选择.check-box:checked元素[:checked]

＆＃13;

checked

＆＃13;

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 = '';
    }
  });
});

＆＃13;

Answer 2

以下是仅使用纯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/

Answer 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 = '';
}

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

复选框 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 = '';
            }
          });
        });

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

5 个答案: