html change color button if checkboxes are checked

Question

I try to change the color of a button if the two checkboxes are checked. But I can't figure out how to do this. I understand that I need javascript, but have no experience at all with javascript. I copied some lines from internet but this doesnot change the color of the button. So if the checkboxes are checked there should be another style selected for the button.

this is my code sofar:

<!DOCTYPE html>
<html>

<head>
    <style>
        .button1 {
            background-color: #FF0000;
            border: 4px;
            border-radius: 20px 20px 20px 20px;
            border-color: red;
            color: yellow;
            padding: 15px 25px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }

        .button1:hover {
            background-color: green;
        }

        .button2 {
            background-color: #FF00FF;
        }
    </style>

    <script type="text/javascript">
        function checkbox_checked {
            if (input.getAttribute('type') == 'checkbox' && input.checked)
                n++;
            checkbox_checked.elements.boxes_checked.value = n;

            if n = 2 button.className = "button2";
        }
    </script>
</head>

<body style="background-color:#E3CEF6;">

    <button class="button1">General</button>

    <!-- Insert a table in a div, so this can be hide -->
    <div id="General">
        <table style="width:50%;margin-left:50px;">
            <colgroup>
                <col span="3" style="background-color:#E3CEF6;">
                <col style="background-color:yellow">
            </colgroup>
            <tr>
                <td><label class="container"> <input type="checkbox" name="cb_General_1"> <span class="checkmark"></span> </label> </td>
                <td>Protocol name(s) : </td>
                <td><input type="text" name="Protocol name(s)" size="35"> </td>
            </tr>
            <tr>
                <td><label class="container"> <input type="checkbox" name="cb_General_2"> <span class="checkmark"></span> </label></td>
                <td>Order name(s):</td>
                <td><input type="text" name="Order name(s)" size="35"></td>
            </tr>
        </table>
    </div>

</body>

</html>

functions don't do anything till you call them. You better go through adding event listeners first — Muhammad Usman, Jul 10 '18 at 10:21
it was answered before on stackoverflow : https://stackoverflow.com/questions/31705665/oncheck-listener-for-checkbox-in-javascript#31705898 — 0x1996, Jul 10 '18 at 10:45

score 0 · Answer 1 · answered Jul 10 '18 at 10:29

You need to set the attribute onchange for the checkbox inputs, and also there are some errors in your javascript code. You can achieve the result like this:

.button1 {
  background-color: #FF0000;
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color:red;
  color: yellow;
  padding: 15px 25px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button1:hover {
  background-color: green;
}
.button2 {
  background-color: #FF00FF;
}

<script>
var n = 0;
function checkbox_checked(e) {
 if(e.checked) {
   n++;
  }
  else {
   n--;
  }
  
  document.getElementsByTagName("button")[0].className = (n == 2) ? "button2" : "button1";
}
</script>
<button class="button1" >General</button> 

<!-- Insert a table in a div, so this can be hide -->
<div id="General">
<table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_General_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Protocol name(s) : </td>
    <td><input type="text" name="Protocol name(s)" size="35"> </td>
   </tr>
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_General_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Order name(s):</td>
    <td><input type="text" name="Order name(s)" size="35"></td>    
  </tr> 
</table>
</div>

Thanks a lot for the help and the explanation. This is what I tried to do — Orca, Jul 11 '18 at 05:49

Mamun · Accepted Answer · 2018-07-10T10:39:00.230

Attach onchange() to the check boxes. Then simply check both check boxes to change the class accordingly. Try the following:

function checkbox_checked(){
  var chk = document.querySelectorAll('input[name^=cb_General_]')
  if(chk[0].checked && chk[1].checked)
    button.className = "button2";
  else button.className = "button1";
}

.button1 {
    background-color: #FF0000;
    border: 4px;
            border-radius: 20px 20px 20px 20px;
            border-color:red;
    color: yellow;
    padding: 15px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.button1:hover {
    background-color: green;
}
.button2 {
    background-color: #FF00FF;
}

<!DOCTYPE html>
<html>
<head>

</head>

  <body style="background-color:#E3CEF6;" >

    <button id = "button" class="button1" >General</button> 

    <!-- Insert a table in a div, so this can be hide -->
    <div id="General">
      <table style="width:50%;margin-left:50px;" >
        <colgroup>
        <col span="3" style="background-color:#E3CEF6;">
        <col style="background-color:yellow">
        </colgroup>
        <tr>
          <td><label class="container"> <input onchange= "checkbox_checked()" type="checkbox" name="cb_General_1"> <span class="checkmark"></span> </label> </td>
          <td>Protocol name(s) : </td>
          <td><input type="text" name="Protocol name(s)" size="35"> </td>
        </tr>
        <tr>
          <td><label class="container"> <input onchange= "checkbox_checked()" type="checkbox" name="cb_General_2"> <span class="checkmark"></span> </label></td>
          <td>Order name(s):</td>
          <td><input type="text" name="Order name(s)" size="35"></td>    
        </tr> 
      </table>
    </div>

  </body>
</html>

Thanks a lot for the help and the explanation. This is what I tried to do — Orca, Jul 11 '18 at 05:48
@Orca, you are most welcome....if the answer solves your problem then you can accept the answer by clicking on the check mark beside the answer to toggle it from greyed out to filled in......thanks. — Mamun, Jul 11 '18 at 05:52

score 0 · Answer 3 · answered Jul 10 '18 at 10:36

You are right that you need JavaScript but if you do not call the function it will do nothing. However, there is a better way of doing it, called eventListener. This always 'listens' to your code and fires up when something changes.

Event Listener Example

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <input type="checkbox" id="check1">
    <input type="checkbox" id="check2">
    <button id="button">Watch me change</button>
</div>
</body>
</html>
<script>
    document.getElementById("check1").addEventListener("change", function(){
        if(document.getElementById("check1").checked && document.getElementById("check2").checked){
            document.getElementById("button").style.backgroundColor = "red";
        }
    });
</script>

Explanation

In the HTML body part there are two checkboxes both with a unique ID (check1 and check2) and a button whose backgroundColor will change if the two checkboxes are checked. Then an eventListener is added to check1 with the addEventListener function. Inside it, it checks that both (&&) checkboxes are checked with the checked attribute. If both are true, it changes the backgroundColor of the given button.

Reference and further reading

Article about the addEventListener function

Thanks a lot for the help and the step by step explanation. This is what I tried to do. Now i see there are several solutions — Orca, Jul 11 '18 at 05:52

score 0 · Answer 4 · answered Jul 10 '18 at 10:44

Try this

var i = 0;
function checkbox_checked(e) {
 if(e.checked) {
   i++;
    
  }
  else {
   i--;
  }
  
   document.getElementsByTagName("button")[0].className = (i == 2) ? "button2" : "button1";
}

button {
  border: 4px;
  border-radius: 20px 20px 20px 20px;
  border-color:red;
  color: yellow;
  padding: 15px 25px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button1{
background-color: #FF0000;
}

.button1:hover {
  background-color: green;
}
.button2 {
  background-color: #FF00FF;
}

<button class="button-css button1" >General</button> 

<!-- Insert a table in a div, so this can be hide -->
<div id="General">
<table style="width:50%;margin-left:50px;" >
 <colgroup>
    <col span="3" style="background-color:#E3CEF6;">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_General_1" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Protocol name(s) : </td>
    <td><input type="text" name="Protocol name(s)" size="35"> </td>
   </tr>
  <tr>
    <td>
      <label class="container">
        <input type="checkbox" name="cb_General_2" onchange="checkbox_checked(this)">
        <span class="checkmark"></span>
      </label>
    </td>
    <td>Order name(s):</td>
    <td><input type="text" name="Order name(s)" size="35"></td>    
  </tr> 
</table>
</div>

Thanks a lot for the help and the explanation. This is what I tried to do. — Orca, Jul 11 '18 at 05:49

score 0 · Answer 5 · 2018-07-10T10:48:31.840

Maybe this one would help you to have an idea. It's just a simple code with html and javascript.

function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var button = document.getElementById("myButton");
    
    if (checkBox.checked == true){
        button.style.backgroundColor = "green";
    } else {
       button.style.backgroundColor = "red";
    }
}

<input id="myCheck" type="checkbox" onclick="myFunction()">Click Me<br>

<button id="myButton" style="background-color: red; color: white">Button</button>

html change color button if checkboxes are checked

5 Answers5