js实现checkbox全选与反选的例子

发布时间:2019-07-24编辑:脚本学堂
js实现checkbox全选与反选很简单,纯js代码实现checkbox复选框的全选与反选,感兴趣的朋友可以参考下。

例1,js实现复选框checkbox全选。
 

复制代码 代码示例:
<input type="checkbox" name="selectall" value=on onclick="selectAll()">
function selectAll(form) {
 var obj = document.getElementsByName('selectall');
 var cks = document.getElementsByTagName("input");
 var ckslen = cks.length;
 for(var i=0;i<ckslen-1;i++) {
  if(cks[i].type == 'checkbox') {
   cks[i].checked = obj[0].checked;
  }
 }
}

例2,js实现复选框全选与全不选。
 

复制代码 代码示例:
<html>
<head>
<script>
function selectAll(){
 var checklist = document.getElementsByName ("selected");
   if(document.getElementById("controlAll").checked)
   {
   for(var i=0;i<checklist.length;i++)
   {
      checklist[i].checked = 1;
   }
 }else{
  for(var j=0;j<checklist.length;j++)
  {
     checklist[j].checked = 0;
  }
 }
} // www.jb200.com
</script>
</head>
<body>
<form>
<input onclick="selectAll()" type="checkbox"   name="controlAll" style="controlAll" id="controlAll"/>全选
1:<input type="checkbox" name="selected" value="1"/>
2:<input type="checkbox" name="selected" value="2"/>
3:<input type="checkbox" name="selected" value="3"/>
4:<input type="checkbox" name="selected" value="4"/>
5:<input type="checkbox" name="selected" value="5"/>
6:<input type="checkbox" name="selected" value="6"/>
</form>
<p>
以上代码实现了checkbox复选框的全选与全不选,供大家参考。
</p>
</body>
</html>