工具/材料
电脑
sublime
jQuery插件
操作方法
- 01
如图，先设置好一些简单的可勾选的选项，这里我就设置了4个选项。
- 02
然后设置两个按钮，一个按钮是全选，一个按钮是全不选，并且分别添加类名，这里我就给它们添加b1,b2的类名。
- 03
保存HTML网页，然后就可以看到有4个选项框，我们需要做的就是当点击”全选”按钮时，选项框会自动被全部勾选上。而点击“全不选”按钮时，则全部都取消勾选。
- 04
接着引入jQuery插件，以及写上jQuery入口函数，不懂的话，参考我的其他指南。
- 05
之后，给b1全选按钮添加一个点击事件click。
- 06
然后设置所有input的checked都为true。在这里用到了prop，prop可以设置元素的固有属性哦。
- 07
这样，当我们点击全选按钮的时候，所有的选项都会被勾选上了哦。
- 08
同理，我们给b2全不选按钮也添加一个click事件。
- 09
这时候，我们就要设置所有的input的checked属性为false，表示不选中。
- 10
这样，当我们点击“全不选”按钮，所有被勾选上的选项都会取消勾选哦。
- 11
为了方便大家，贴出全选按钮的源代码，记得jQuery的路径要修改对哦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js">
</script>
<script>
(function(){
(".b1").click(function(){
("input").prop("checked",true);
});
(".b2").click(function(){
("input").prop("checked",false);
});
});
</script>
</head>
<body>
舞蹈<input type="checkbox"><br>
排球<input type="checkbox"><br>
瑜伽<input type="checkbox"><br>
网球<input type="checkbox"><br>
<button class="b1">全选</button>
<button class="b2">全不选</button>
</body>
</html> - End
特别提示
我用的是jQuery实现全选的，而js太复杂了，后续我再写一个关于js的。
