Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 js实现checkbox全选与反选的例子

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

发布时间:2015-07-31   编辑:www.jquerycn.cn
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.jquerycn.cn
</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>

您可能感兴趣的文章:
checkbox全选与反选简单代码
js实现checkbox全选与反选的例子
JQuery实现全选与反选的二种方法
jquery checkbox复选框是否选中的检测代码
jquery全选、反选、将选中的表单值分割为字符串
jquery全选/全不选/反选另一种实现方法(配合原生js)
jquery判断checkbox是否选中的代码参考
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
jQuery判断checkbox(复选框)是否选中、全选、反选
jQuery实现CheckBox全选、全不选的示例代码

关键词: checkbox  反选  复选框  全选   
[关闭]