jQuery实现checkbox复选框全选代码示例

复选框全选效果大家应该都不陌生，大量网站都有应用。
具有批量管理功能的网站更是如此，下面分享一个具有全选\反选功能的例子。
代码如下：

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>jQuery实现checkbox复选框全选代码示例-gaodaima.com</title> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(function(){ 
  var checkboxes = $('input[name=choose]'); 
  var btn = $('#btn'); 
  var btn2 = $('#btn2'); 
  btn.click(function(){ 
    checkboxes.prop('checked',this.checked); 
  }); 
  checkboxes.click(function(){ 
    var flag = true; 
    checkboxes.each(function(){ 
      if(!this.checked) flag = false; 
    }); 
    btn.attr('checked',flag); 
  }); 
  btn2.click(function(){ 
    var flag = true; 
    checkboxes.each(function(){ 
      this.checked = !this.checked; 
      if(!this.checked) flag = false; 
    }); 
    btn.attr('checked',flag); 
  })
})
</script> 
</head> 
<body> 
<input type="checkbox" name="btn" id="btn"/><label for="btn">全选/全不选</label><br/> 
<input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">选项1</label><br/> 
<input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">选项2</label><br/> 
<input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">选项3</label><br/> 
<input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">选项4</label><br/> 
<input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">选项5</label><br/> 
<input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">选项6</label><br/> 
<input type="checkbox" name="choose" id="checkbox7"/><label for="checkbox7">选项7</label><br/> 
<input type="checkbox" name="choose" id="checkbox8"/><label for="checkbox8">选项8</label><br/> 
<input type="checkbox" name="choose" id="checkbox9"/><label for="checkbox9">选项9</label><br/> 
<input type="checkbox" name="choose" id="checkbox10"/><label for="checkbox10">选项10</label><br/> 
<a href="javascript:;" id="btn2">反选</a> 
</body> 
</html>

<!DOCTYPE HTML>

<head>

<title>jQuery实现checkbox复选框全选代码示例-gaodaima.com</title>

$(function(){

var checkboxes = $('input[name=choose]');

var btn = $('#btn');

var btn2 = $('#btn2');

btn.click(function(){

checkboxes.prop('checked',this.checked);

});

checkboxes.click(function(){

var flag = true;

checkboxes.each(function(){

if(!this.checked) flag = false;

});

btn.attr('checked',flag);

});

btn2.click(function(){

var flag = true;

checkboxes.each(function(){

this.checked = !this.checked;

if(!this.checked) flag = false;

});

btn.attr('checked',flag);

})

</script>

</head>

<body>

</body>

</html>

本文案例为大家展示了《jQuery实现checkbox复选框全选代码示例》的代码，若要看代码效果请大家点击“运行代码”按钮。

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>jQuery实现checkbox复选框全选代码示例-gaodaima.com</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function(){   var checkboxes = $('input[name=choose]');   var btn = $('#btn');   var btn2 = $('#btn2');   btn.click(function(){     checkboxes.prop('checked',this.checked);   });   checkboxes.click(function(){     var flag = true;     checkboxes.each(function(){       if(!this.checked) flag = false;     });     btn.attr('checked',flag);   });   btn2.click(function(){     var flag = true;     checkboxes.each(function(){       this.checked = !this.checked;       if(!this.checked) flag = false;     });     btn.attr('checked',flag);   }) }) </script> </head> <body> <input type="checkbox" name="btn" id="btn"/><label for="btn">全选/全不选</label><br/> <input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">选项1</label><br/> <input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">选项2</label><br/> <input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">选项3</label><br/> <input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">选项4</label><br/> <input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">选项5</label><br/> <input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">选项6</label><br/> <input type="checkbox" name="choose" id="checkbox7"/><label for="checkbox7">选项7</label><br/> <input type="checkbox" name="choose" id="checkbox8"/><label for="checkbox8">选项8</label><br/> <input type="checkbox" name="choose" id="checkbox9"/><label for="checkbox9">选项9</label><br/> <input type="checkbox" name="choose" id="checkbox10"/><label for="checkbox10">选项10</label><br/> <a href="javascript:;" id="btn2">反选</a> </body> </html>

注意：如需评论后运行请重新刷新页面,谢谢您搞代码学习知识

原创文章，转载请注明： 转载自搞代码

本文链接地址: jQuery实现checkbox复选框全选代码示例

分享到： QQ好友微信 QQ空间新浪微博印象笔记轻笔记有道云笔记