<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Select all Reverse Selection</title></Head><Body> <inputtype= "button"value= "Select All"ID= "All"> <inputtype= "button"value= "Reverse Selection"ID= "Reverse"> <inputtype= "checkbox"ID= "Flagcheck"> <ulID= "CheckBoxList"> <Li><inputtype= "checkbox"></Li> <Li><inputtype= "checkbox"></Li> <Li><inputtype= "checkbox"></Li> <Li><inputtype= "checkbox"></Li> <Li><inputtype= "checkbox"></Li> <Li><inputtype= "checkbox"></Li> <Li><inputtype= "checkbox"></Li> <Li><inputtype= "checkbox"></Li> <Li><inputtype= "checkbox"></Li> <Li><inputtype= "checkbox"></Li> <Li><inputtype= "checkbox"></Li> </ul> <P>Boolean property, as long as name is available, the value can be null checked,selected,readonly,disabled ....</P> <Scripttype= "Text/javascript"> //1. Find a node varallbtn=Document.queryselectorall ("#all")[0]; varreversebtn=Document.queryselector ("#reverse"); varFlagcheck=document.getElementById ("Flagcheck"); varChecklist=Document.queryselectorall ("#checkboxList Input"); functionCheckall () { for(varJ= 0; J<Checklist.length; J++) { if(!checklist[j].checked) { Break; } } if(J==checklist.length) {//alert ("All Is true")flagcheck.checked= true; }Else { //alert ("At least one is not true");flagcheck.checked= false; } } //2. Add Event //Select AllAllbtn.onclick= function() { if(flagcheck.checked) {flagcheck.checked= false; for(varI= 0; I<checklist.length; I++) {checklist[i].checked= false; } }Else{flagcheck.checked= true; for(varI= 0; I<checklist.length; I++) {checklist[i].checked= true; } } } //Inverse SelectionReversebtn.onclick= function() { for(varI= 0; I<checklist.length; I++) { if(checklist[i].checked) {checklist[i].checked= false; }Else{checklist[i].checked= true; } } //perform a check to see if all checklist are selected.Checkall (); } for(varI= 0; I<checklist.length; I++) {Checklist[i].onclick=Checkall; } </Script></Body></HTML>
JavaScript, choose All-in-class notes