1

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

5 Answers 5

4

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

1
  • This was very Nice. Its working perfectly. Thanks for the Effort. Aug 15, 2016 at 10:16
3

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.net/avh4dsnm/1/

1
  • This also help me. Thanks a lot Aug 15, 2016 at 10:17
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 = '';
}
1

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.