使用 jQuery 实现 checkbox 全选、全不选

学习笔记 马富天 2017-06-15 20:00:14 81 0

【摘要】在很多应用场景下面我们是需要使用 checkbox 来实现全选、全不选的功能的,其实在 jQuery 代码中,这是非常容易实现的,本文讲讲如何使用 jQuery 来快速实现这一功能。

首先当然需要引入 jQuery 文件(版本不限)。完整的代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title></title>
  5.         <script src="/public/blog/home/style/js/jquery-1.8.2.min.js"></script>
  6.         <script type="text/javascript">
  7.             function checkAll(obj){
  8.                 $("#box input[type='checkbox']").prop('checked', $(obj).prop('checked'));
  9.             }        
  10.         </script>
  11.     </head>
  12.     <body>
  13.         <div id="box">
  14.             <form>
  15.                 <input type="checkbox" onclick="checkAll(this)">全选<br><br>
  16.                 <input type="checkbox"><br>
  17.                 <input type="checkbox"><br>
  18.                 <input type="checkbox"><br>
  19.                 <input type="checkbox"><br>
  20.                 <input type="checkbox"><br>
  21.                 <input type="checkbox"><br>
  22.                 <input type="checkbox"><br>
  23.                 <input type="checkbox"><br>
  24.                 <input type="checkbox"><br>
  25.             </form>
  26.         </div>
  27.     </body>
  28. </html>

本文通过很少的代码就可实现 checkbox 的全选和全不选。

请输入图片名称

版权归 马富天PHP博客 所有

本文标题:《使用 jQuery 实现 checkbox 全选、全不选》

本文链接地址:http://www.mafutian.net/260.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 CloverFlush.dll 没有被指定在 Windows 上运行,或者它包含错误。 》 下一篇《 使用 HTML5 实现本地存储——小例子:简易留言板 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多