一键式复选框选择和取消选择 jQuery metalCheckAll

  • 源码大小:9.59KB
  • 所需积分:1积分
  • 源码编号:19JP-3101
  • 浏览次数:665次
  • 最后更新:2023年05月06日
  • 所属栏目:表单
本站默认解压密码:19jp.com 或 19jp_com

简介

metalCheckAll是一个轻量级且简单的jQuery CheckAll插件,允许用户只需单击一次即可选择和取消选择一组复选框。

非常适合选择/取消选择列表或数据表中的所有项目以进行批量操作,或通过使用户能够快速选择或清除多个选项来简化表单提交。

如何使用它:

1.下载并在页面上包含metalCheckAll-jQuery插件。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/jquery.metalCheckAll.js"></script>

2.将插件应用于主复选框,然后主复选框将控制所有相关复选框的选择和取消选择。

  1. <!-- Master Checkbox -->
  2. <input type="checkbox" id="example"> Select All
  3.  
  4. <!-- Checkbox Groups -->
  5. <div class="group-1">
  6. <input type="checkbox" name="a">
  7. <input type="checkbox" name="a">
  8. <input type="checkbox" name="a">
  9. </div>
  10. <div class="group-2">
  11. <input type="checkbox" class="b">
  12. <input type="checkbox" class="b">
  13. <input type="checkbox" class="b">
  14. </div>
  15. <div class="group-3">
  16. <input type="checkbox" id="c">
  17. <input type="checkbox" id="c">
  18. <input type="checkbox" id="c">
  19. </div>
  20. <div class="group-4">
  21. <input type="checkbox" data-type="d">
  22. <input type="checkbox" data-type="d">
  23. <input type="checkbox" data-type="d">
  24. </div>
  1. $('#example3').metalCheckAll({
  2. target : ['input[name=a]', '.b', '#c', 'input[data-type="d"]'],
  3. });

3.您还可以将“全选”功能应用于HTML按钮,如下所示:

  1. <!-- Check All Button -->
  2. <button id="example2"></button>
  3.  
  4. <!-- Checkboxes -->
  5. <input type="checkbox" class="example2">
  6. <input type="checkbox" class="example2">
  7. <input type="checkbox" class="example2">
  1. $('#example2').metalCheckAll({
  2. target : ['.example2'],
  3. btnValueChecked : 'Click ME',
  4. btnValueUnChecked : 'UnCheck Me'
  5. });

预览截图