metalCheckAll是一个轻量级且简单的jQuery CheckAll插件,允许用户只需单击一次即可选择和取消选择一组复选框。
非常适合选择/取消选择列表或数据表中的所有项目以进行批量操作,或通过使用户能够快速选择或清除多个选项来简化表单提交。
1.下载并在页面上包含metalCheckAll-jQuery插件。
- <script src="/path/to/cdn/jquery.slim.min.js"></script>
- <script src="/path/to/jquery.metalCheckAll.js"></script>
2.将插件应用于主复选框,然后主复选框将控制所有相关复选框的选择和取消选择。
- <!-- Master Checkbox -->
- <input type="checkbox" id="example"> Select All
- <!-- Checkbox Groups -->
- <div class="group-1">
- <input type="checkbox" name="a">
- <input type="checkbox" name="a">
- <input type="checkbox" name="a">
- </div>
- <div class="group-2">
- <input type="checkbox" class="b">
- <input type="checkbox" class="b">
- <input type="checkbox" class="b">
- </div>
- <div class="group-3">
- <input type="checkbox" id="c">
- <input type="checkbox" id="c">
- <input type="checkbox" id="c">
- </div>
- <div class="group-4">
- <input type="checkbox" data-type="d">
- <input type="checkbox" data-type="d">
- <input type="checkbox" data-type="d">
- </div>
- $('#example3').metalCheckAll({
- target : ['input[name=a]', '.b', '#c', 'input[data-type="d"]'],
- });
3.您还可以将“全选”功能应用于HTML按钮,如下所示:
- <!-- Check All Button -->
- <button id="example2"></button>
- <!-- Checkboxes -->
- <input type="checkbox" class="example2">
- <input type="checkbox" class="example2">
- <input type="checkbox" class="example2">
- $('#example2').metalCheckAll({
- target : ['.example2'],
- btnValueChecked : 'Click ME',
- btnValueUnChecked : 'UnCheck Me'
- });