JS implements CheckBox checkbox selection, no selection or no selection function_javascript skills

The CheckBox control indicates whether a specific state (i.e. option) is selected (on, value 1) or cleared (off, value 0). Use this control in your application to provide the user with a "True/False" or "yes/no" choice. Because CheckBoxes work independently of each other, users can select any number of CheckBoxes at the same time to combine options.

CheckBox JS implements the functions of selecting all, not selecting, and not selecting all. It is very simple. The specific content is as follows

Things:

• 1. Get elements
• 2. Select all, unselect, invert the selection and add click events
• 3. Use for loop checkbox
• 4. Set checked in the checkbox to true to select all
• 5. Set checked in the checkbox to false to deselect
• 6. Through if judgment, if checked is true, set checked to false, and if checked is false, set checked to true. .
  

html code:

 <input type="button" value="全选" id="sele"/>
  <input type="button" value="不选" id="setinterval"/>
  <input type="button" value="反选" 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');//获取全选
var unsele=document.getElementById('setinterval');//获取不选
var clear=document.getElementById('clear');//获取反选
var checkbox=document.getElementById('checkboxs');//获取div
var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}

//不选
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反选
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>

The above is the entire content of this article, I hope you all like it.