• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

jquery 程序员 7年前 (2019-01-15) 194次浏览 已收录 0个评论

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

<!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复选框全选代码示例》的代码,若要看代码效果请大家点击“运行代码”按钮。
[code]<!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&gt; <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>[/code]

搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jQuery实现checkbox复选框全选代码示例
喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址