jQuery怎样实现全选功能和全不选功能呢

2024-04-07 09:48:00

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

赞 (0)

史上最全的电脑快捷键组合键使用功能全集

操作方法 01 如何让自己练就成冲浪高手,那就必须得记住键盘每个键的使用功能!只要把日常常用的快捷键记住就能大大提高自己的效率节省很多的时间,远离鼠标!说归说但是还需要大家多多下功夫多多联系,快捷键很 ...
如何使3D-Touch功能更全更好用

越狱后安装下面三个小插件使3D-Touch这个功能更全更合理更好用.使用起来流畅不卡. 操作方法 01 RevealMenu 2.1-4上滑进入编辑模式,为音乐增加了例如播放暂停,播放模式,播放曲目等 ...
pdf编辑器哪个好用功能最全

pdf由于安全性和阅读效果都比较好所以受到大家的喜爱,得到广泛使用.但是在需要编辑pdf文件的时候大家就都头疼了.其实现在有很多的编辑器可以完成pdf编辑器,那么pdf编辑器哪个好用功能最全呢? 操作 ...
淘宝店铺全屏店招和全屏导航怎么设计

店铺全屏店招和全屏导航一般是为和全屏海报匹配而同时设计的,尺寸宽度一般为1920,适合专业版旺铺.淘宝装修市场有30元的全屏模板,默认就是全屏店招,导航以及其他页面的全屏尺寸作者:为主的祥助操作方 ...
美拍怎么全屏播放美拍全屏播放方法

美拍全屏播放方法: 进入你想要观看的视频,点击右下角的全屏按钮就可以全屏观看了.当然,如果你第一次进入发现没有全屏按钮的话,你可以退出进程之后再进入一次就有了,这个不知道是BUG还是什么的. 关于美拍 ...
饥荒怎么地图全开饥荒地图全开代码怎么用

探图是饥荒游戏的乐趣,然而对于新手来说能够做出准确预判,特别是海难这样的岛屿不规则分布,比较困难.玩久了,老手都知道应该往什么方向走,哪里最有可能出什么样的资源,新手自然是一脸懵逼.所以不少人都喜欢用 ...
绝地求生刺激战场电脑版怎么全屏和退出全屏？

绝地求生刺激战场手游如今相当火爆,但是很多朋友不习惯使用手机玩这种类型的游戏,更习惯使用电脑玩,下面小编就给大家简单介绍一下绝地求生刺激战场怎么全屏和退出全屏. 操作方法 01 首先我们打开模拟器并登 ...
苹果手机十大隐藏功能（iphone的隐藏功能大全）

现在用iPhone的人越来越多,大家选择iPhone不仅是因为它外形漂亮,可以装B等等因素,更是因为它有流畅的系统和人性化的功能设计,其实iPhone种有很多隐藏的便捷功能是我们不知道的,一旦你用上了 ...
腾讯微云如何使用自动文件同步功能?微云自动同步功能设置方法介绍

怎样设置微云的自动同步功能?平常在电脑里比较重要的文件,怕丢失或磁盘损坏的话,可以将文件上传到腾讯微云中,但如果这些文件经常需要更新修改的话,每次都手动传到云盘中,非常麻烦,其实可以通过腾讯微云的自动 ...
iwatch都有什么功能?Apple Watch有哪些功能

2014年9月9日发布的一款新型智能手表，也是一款全方位的健康和运动追踪设备。Applle Watch14年9月9日上午10点(北京时间9月10日凌晨1点)新品发布会，在苹果总部——加州库比蒂诺当地的 ...