全选功能在网页中也是非常常见的 ， 比如购物平台的购物车就有全选和全不选的功能 ， 今天咪咪我就来教教大家怎样用jQuery来实现这些功能 。 工具/材料 电脑
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=https://vvvtt.com/article/"jquery-3.2.1.min.js">
</script>
<script>
(function(){
(".b1").click(function(){
("input").prop("checked",true);
推荐阅读
- 怎样预防生石花球状叶腐烂
- 怎样建立网络拨号连接
- 诸天1.0正式版隐藏密码攻略 怎样获取开局礼包
- 怎样科学繁殖白兰花
- 怎样制作网络小说封面
- 怎样用键盘操作电脑？
- 华为手机怎样进行硬件检测
- 手机怎样转账银行卡
- QQ登录如何设置指纹解锁
- 怎样用手机搜狗输入法扫描条形码？