Of Stack

Implementation code of JS operation input tag attribute checkbox full selection

  • 2021-07-26 06:12:41
  • OfStack

No more nonsense, the specific code is as follows: 


<html>
<head>
< >
function selectAll(){
 var checklist = document.getElementsByName ("selected");// Get all name Value is selected Label of 
 if(document.getElementById("controlAll").checked){// Judge when id For controlAll Whether the label of is selected 
 for(var i=0;i<checklist.length;i++){ 
  checklist[i].checked = true;// When selected, gets all name Value is selected The labels of are selected 
 } 
 }else{
 for(var j=0;j<checklist.length;j++){
  checklist[j].checked = false;// When not selected, gets all name Value is selected None of the labels of are selected 
 }
 }
}
</ >
</head>
<body>
<form>
<input ="selectAll()" type="checkbox" name="controlAll" style="controlAll" id="controlAll"/> All selection <br>
1:<input ="heheda()" type="checkbox" name="selected" value="1"/><br>
2:<input ="heheda()" type="checkbox" name="selected" value="2"/><br>
3:<input ="heheda()" type="checkbox" name="selected" value="3"/><br>
4:<input ="heheda()" type="checkbox" name="selected" value="4"/><br>
5:<input ="heheda()" type="checkbox" name="selected" value="5"/><br>
6:<input ="heheda()" type="checkbox" name="selected" value="6"/><br>
</form>
< type="text/ ">
function heheda(){
 var controlAll = document.getElementById("controlAll");// Get id Value is controlAll Label of 
 var checklists = document.body.querySelectorAll("input[type='checkbox']").length;// Gets all formatted as checkbox Adj. input Number of labels 
 var selectedLength=document.body.querySelectorAll("input[name=selected]:checked").length;// Get all name Value is selected And has been selected input Number of labels 
 if(controlAll.checked){// Judge when id For controlAll Whether the label of is selected 
   controlAll.checked = false;// Automatically cancels when selected id For controlAll The label of is selected 
 }else{
  if(selectedLength == checklists-1){// When not selected, it is judged that when obtaining all name Value is selected And has been selected input Number of labels   And   Gets all formatted as checkbox Adj. input Number of labels -1  Whether it is equal or not 
  controlAll.checked = true;// If equal, automatically select id For controlAll Label of 
  }
 }
 }
</ >
</body>
</html>
Related articles: