JS implements the CheckBox check box option to select all none or none

The CheckBox control indicates whether a particular state (that is, an option) is selected (on, with a value of 1) or cleared (off, with a value of 0). Use this control in your application to give the user the choice of "True/False" or "yes/no". Because CheckBox works independently of each other, users can select any number of CheckBox at the same time for a combination of options.

CheckBox Check box JS implements select all, select none, select none, simple, as follows

Ideas:

1. Get the element 2. Add click event to select All not Anti-Select 3. Use for to cycle checkbox 4. Set checked of checkbox to true to realize full selection 5. Setting checked of checkbox to false is optional 6. Judging from if, if checked is true selected, set checked to false unselected, and if checked is false unselected, set checked to true selected.

html code:

 <input type="button" value=" Future generations " id="sele"/>
 <input type="button" value=" Don't choose " id="setinterval"/>
 <input type="button" value=" The selected " id="clear"/>
  <div id="checkboxs">
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
  <input type="checkbox"/><br />
</div>

js code:

<script>
window.onload=function(){

var sele=document.getElementById('sele');// For future generations 
var unsele=document.getElementById('setinterval');// Get don't choose 
var clear=document.getElementById('clear');// Access to the selected 
var checkbox=document.getElementById('checkboxs');// To obtain div
var checked=checkbox.getElementsByTagName('input');// To obtain div Under the input
// Future generations 
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}

// Don't choose 
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
// The selected 
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}


}
</script>

This is the end of this article, I hope you enjoy it.