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

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

jQuery 程序员 2年前 (2019-01-15) 159次浏览 已收录 0个评论

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

 

本文案例为大家展示了《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> <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]

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

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

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

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