Change color of a styled checked checkbox with button

Question

I've been stuck on this for a while. To explain very quickly, i have a table of different checkboxes. The user checks however many boxes and clicks continue. The same table shows up on another page/ The boxes that were checked are suppose to load by the click of a button.

My question is, how can I change the color of my styled checkboxes to another color by the click of a button.

Update, I've added code, sorry for the confusion, first time using this

 table.example1, table.example1 th, table.example1 td { border: 3px solid grey; max-width: 200px; } input[type=checkbox] { display:none; } input[type=checkbox] + label { display:inline-block; padding: 6px 60px; margin-bottom: 0; font-size: 14px; line-height: 20px; color: white; text-align: center; vertical-align: middle; cursor: pointer; background-color: transparent; background-repeat: repeat-x; } input[type=checkbox]:checked + label{ background-color: #3e618b; outline: 0; } 

 <table class="example1" id="example" style="width:40%;" align='center'> <tr> <td> <input type="checkbox" id="chk1" name="chk" value="1"> <label for="chk1">&nbsp; 1</label> </td> <td> <input type="checkbox" id="chk2" name="chk"value="2"> <label for="chk2">&nbsp; 2</label> </td> </tr> </table> <button>Changes checked checkbox color</button> 

Answer 1

Well you could add a class to the label and then define the color based on that class like so:

 function toggle() { var labels = document.getElementsByTagName('label'); for(var i = 0; i < labels.length; i++) { labels[i].classList.toggle('color'); } } 

 table.example1, table.example1 th, table.example1 td { border: 3px solid grey; max-width: 200px; } input[type=checkbox] { display: none; } input[type=checkbox]+label { display: inline-block; padding: 6px 60px; margin-bottom: 0; font-size: 14px; line-height: 20px; color: white; text-align: center; vertical-align: middle; cursor: pointer; background-color: transparent; background-repeat: repeat-x; } input[type=checkbox]:checked+label { background-color: #3e618b; outline: 0; } input[type=checkbox]:checked+label.color { background-color: red; outline: 0; } 

 <table class="example1" id="example" style="width:40%;" align='center'> <tr> <td> <input type="checkbox" id="chk1" name="chk" value="1"> <label for="chk1">&nbsp; 1</label> </td> <td> <input type="checkbox" id="chk2" name="chk" value="2"> <label for="chk2">&nbsp; 2</label> </td> </tr> </table> <button onclick="toggle()">Changes radio button onclick</button> 

Answer 2

You could change class attribute of a parent by click on the button.

 $("button").click(function() { $("table").toggleClass("alternative"); }); 

 table.example1, table.example1 th, table.example1 td { border: 3px solid grey; max-width: 200px; } input[type=checkbox] { display:none; } input[type=checkbox] + label { display:inline-block; padding: 6px 60px; margin-bottom: 0; font-size: 14px; line-height: 20px; color: white; text-align: center; vertical-align: middle; cursor: pointer; background-color: transparent; background-repeat: repeat-x; } input[type=checkbox]:checked + label{ background-color: #3e618b; outline: 0; } .alternative input[type=checkbox]:checked + label{ background-color: #f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="example1" id="example" style="width:40%;" align='center'> <tr> <td> <input type="checkbox" id="chk1" name="chk" value="1"> <label for="chk1">&nbsp; 1</label> </td> <td> <input type="checkbox" id="chk2" name="chk"value="2"> <label for="chk2">&nbsp; 2</label> </td> </tr> </table> <button>Changes checked checkbox color</button> 

Answer 3

You can do it with just CSS

HIDE THE ORIGINAL INPUT FIELD

input[type=checkbox]{
visibility: hidden;
position: absolute;
}

Then add your own custom css to display the fields

input[type=checkbox] + label:before{
  height:18px;
  margin-right: 5px;
  content: " ";
  display:inline-block;
  vertical-align: baseline;
  border:1px solid #ccc;
  border-radius:4px;
  width:18px;
}

Then add your css for your desired style and background when the checkbox is selected

input[type=checkbox]:checked + label:before{
      background: gold;
}