复选框案例
发布日期：2021-05-14 14:40:14
浏览次数：24
分类：原创文章
本文共 2443 字，大约阅读时间需要 8 分钟。
22-复选框案例-案例效果的介绍
23-复选框案例-案例的分析和实现
功能分析
- 全选
-
- 为全选按钮绑定单击事件。
- 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。
-
- 全不选
-
- 为全不选按钮绑定单击事件。
- 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 false。
-
- 反选
-
- 为反选按钮绑定单击事件
- 获取所有的商品项复选框元素，为其添加 checked 属性，属性值是目前相反的状态。
-
代码实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复选框</title></head><body> <table id="tab1" border="1" width="800" align="center"> <tr> <th style="text-align: left"> <input style="background:lightgreen" id="selectAll" type="button" value="全选"> <input style="background:lightgreen" id="selectNone" type="button" value="全不选"> <input style="background:lightgreen" id="reverse" type="button" value="反选"> </th> <th>分类ID</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>1</td> <td>手机数码</td> <td>手机数码类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>2</td> <td>电脑办公</td> <td>电脑办公类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>4</td> <td>家居饰品</td> <td>家居饰品类商品</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> </table></body><script src="js/jquery-3.3.1.min.js"></script><script> //全选 //1.为全选按钮添加单击事件 $("#selectAll").click(function(){ //2.获取所有的商品复选框元素，为其添加checked属性，属性值true $(".item").prop("checked",true); }); //全不选 //1.为全不选按钮添加单击事件 $("#selectNone").click(function(){ //2.获取所有的商品复选框元素，为其添加checked属性，属性值false $(".item").prop("checked",false); }); //反选 //1.为反选按钮添加单击事件 $("#reverse").click(function(){ //2.获取所有的商品复选框元素，为其添加checked属性，属性值是目前相反的状态 let items = $(".item"); items.each(function(){ $(this).prop("checked",!$(this).prop("checked")); }); });</script></html>发表评论
最新留言
初次前来，多多关照！
[***.217.46.12]2025年04月30日 06时36分58秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
主定理的应用
2019-03-11
动态规划算法的迭代实现
2019-03-11
最优装载问题
2019-03-11
最大团问题
2019-03-11
圆排列问题
2019-03-11
课程总结
2019-03-11
认识CMake及应用
2019-03-11
CMake的主体框架
2019-03-11
微积分（三）
2019-03-11
Oracle
2019-03-11
软件工程应用
2019-03-11
数据科学
2019-03-11
论文报告/前沿文章
2019-03-11
Less
2019-03-11
函数与高级变量
2019-03-11
键盘事件
2019-03-11
弱监督
2019-03-11
二 召回算法
2019-03-11
2020-11月计划实施表
2019-03-11
个人常用网络
2019-03-11
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 461234924 位访客