javascript - How to change the Color of the button When click the Checkbox - Stack Overflow

admin管理员组

文章数量:1312655

Here, there is a button and two more check boxes are added. I am trying to do is, when I click on any check box, the Button color should change to green or any other color. If I unchecked all the boxes, the button color should change to gray color. Please help me. Thank you.

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

Here, there is a button and two more check boxes are added. I am trying to do is, when I click on any check box, the Button color should change to green or any other color. If I unchecked all the boxes, the button color should change to gray color. Please help me. Thank you.

.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

Share Improve this question Follow edited Aug 15, 2016 at 9:30 Ivan 40.8k88 gold badges7373 silver badges117117 bronze badges asked Aug 15, 2016 at 9:19 Melbin MathaiMelbin Mathai 50711 gold badge88 silver badges2626 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

• Use document.querySelectorAll to select elements

• Use .check-box:checked to select checked elements[: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">

Here is an example using pure javascript only (no 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">

Fiddle here : https://jsfiddle/avh4dsnm/1/

To elaborate slightly on Rayon's excellent answer and to make this a bit more dynamic. You could use a data attribute to specify the colour for the button to be for example

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

You would then need another variable for the colour

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

Just for fun, here's a CSS-only solution:

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

what should be the code if I am using a multiple buttons?

checkbox 1 --> button 1

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

本文标签： javascriptHow to change the Color of the button When click the CheckboxStack Overflow