jQuery怎样实现全选功能和全不选功能呢
全选功能在网页中也是非常常见的,比如购物平台的购物车就有全选和全不选的功能,今天咪咪我就来教教大家怎样用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>