JS implementation of code examples to select all and none-JS Tutorial-php.cn

JS implementation of code examples to select all and none

Guanhui

Release： 2020-07-28 18:27:26

forward

2804 people have browsed it

JS implementation of code examples to select all and none

The example in this article shares with you the specific code of js to implement all selection and none selection for your reference. The specific content is as follows

A few very concise lines of native js To achieve all selection and none selection, masters can add the inverse selection function on this basis.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>全选、全不选</title>
</head>
<body>
<table border="1">
 <tr>
 <td><input type="checkbox" name="mmAll" onclick="All(this, &#39;mm[]&#39;)"></td>
 </tr>
 <tr><td><input type="checkbox" value="1" name="mm[]" class="check" id="ids1" onclick="Item(this, &#39;mmAll&#39;)"></td></tr>
 <tr><td><input type="checkbox" value="2" name="mm[]" class="check" id="ids2" onclick="Item(this, &#39;mmAll&#39;)"></td></tr>
 <tr><td><input type="checkbox" value="3" name="mm[]" class="check" id="ids3" onclick="Item(this, &#39;mmAll&#39;)"></td></tr>
 <tr><td><input type="checkbox" value="4" name="mm[]" class="check" id="ids4" onclick="Item(this, &#39;mmAll&#39;)"></td></tr>
 <tr><td><input type="checkbox" value="5" name="mm[]" class="check" id="ids5" onclick="Item(this, &#39;mmAll&#39;)"></td></tr>
 <tr><td><input type="checkbox" value="6" name="mm[]" class="check" id="ids6" onclick="Item(this, &#39;mmAll&#39;)"></td></tr>
</table>
</body>
</html>
<script type="text/javascript">
 //Check all
 function All(e, itemName)
 {
  var aa = document.getElementsByName(itemName);
  for (var i=0; i < aa.length; i++)
 
   aa[i].checked = e.checked; //得到那个总控的复选框的选中状态 
 }
 
 //Single select
 function Item(e, allName)
 {
  var all = document.getElementsByName(allName)[0];
  if(!e.checked) all.checked = false;
  else
  {
   var aa =document.getElementsByName(e.name);
   for (var i=0; i<aa.length; i++)
    if(!aa[i].checked) return;
   all.checked= true;
  }
 }
</script>

Copy after login

Rendering: