复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选
2024-05-15 14:18:15
复选框全选与全不选效果
逻辑：复选框的checked属性与复选框全选效果对应起来，全选复选框checked：true 时，全部复选框checked：true；
全选框checked：false 时，全部复选框checked：false
function selectAll(){var oInput = document.getElementsByName("cartCheckBox");for(var i=0;i<oInput.length;i++){oInput[i].checked=document.getElementById("allCheckBox").checked;}
}
根据单个复选框的选择情况确定全选复选框是否被选
逻辑：全选复选框的checked属性对应全部单选复选框的checked；当全部单选框的checked：true时，全选复选框checked：true；
当全部单选框的某一个复选框checked：false时，全选复选框checked：false。
function selectSingle(){var k=0;var oInput = document.getElementsByName("cartCheckBox");for(var i=0;i<oInput.length;i++){if(oInput[i].checked==false){k=1;break;}}if(k==0){document.getElementById("allCheckBox").checked=true;}else{document.getElementById("allCheckBox").checked=false;}
}
HTML代码
1 <div id="content" style="width: 800px;height: 600px;margin: 10px auto 5px auto;clear: both;">
2 <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
3 <form action="" method="post" name="myform">
4 <tr>
5 <td class="title_1"><input id="allCheckBox" type="checkbox" value="" onclick="selectAll()" />全选</td>
6 <td class="title_2" colspan="2">店铺宝贝</td>
7 <td class="title_3">获积分</td>
8 <td class="title_4">单价（元）</td>
9 <td class="title_5">数量</td>
10 <td class="title_6">小计（元）</td>
11 <td class="title_7">操作</td>
12 </tr>
13 <tr>
14 <td colspan="8" class="line"></td>
15 </tr>
16 <tr>
17 <td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <img src="data:images/taobao_relation.jpg" alt="relation" /></td>
18 </tr>
19 <tr id="product1">
20 <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" onclick="selectSingle()" /></td>
21 <td class="cart_td_2"><img src="data:images/taobao_cart_01.jpg" alt="shopping"/></td>
22 <td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />
23 颜色：棕色 尺码：37<br />
24 保障：<img src="data:images/taobao_icon_01.jpg" alt="icon" /></td>
25 <td class="cart_td_4">5</td>
26 <td class="cart_td_5">138.00</td>
27 <td class="cart_td_6"><img src="data:images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_1','minus')" class="hand"/> <input id="num_1" type="text" value="1" class="num_input" readonly="readonly"/> <img src="data:images/taobao_adding.jpg" alt="add" onclick="changeNum('num_1','add')" class="hand"/></td>
28 <td class="cart_td_7"></td>
29 <td class="cart_td_8"><a href="javascript:deleteRow('product1');">删除</a></td>
30 </tr>
31
32 <tr>
33 <td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a> 卖家：<a href="#">lokemick2009</a> <img src="data:images/taobao_relation.jpg" alt="relation" /></td>
34 </tr>
35 <tr id="product2">
36 <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" onclick="selectSingle()" /></td>
37 <td class="cart_td_2"><img src="data:images/taobao_cart_02.jpg" alt="shopping"/></td>
38 <td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />
39 保障：<img src="data:images/taobao_icon_01.jpg" alt="icon" /> <img src="data:images/taobao_icon_02.jpg" alt="icon" /></td>
40 <td class="cart_td_4">12</td>
41 <td class="cart_td_5">265.00</td>
42 <td class="cart_td_6"><img src="data:images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_2','minus')" class="hand"/> <input id="num_2" type="text" value="1" class="num_input" readonly="readonly"/> <img src="data:images/taobao_adding.jpg" alt="add" onclick="changeNum('num_2','add')" class="hand"/></td>
43 <td class="cart_td_7"></td>
44 <td class="cart_td_8"><a href="javascript:deleteRow('product2');">删除</a></td>
45 </tr>
46
47 <tr>
48 <td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a> 卖家：<a href="#">林颜店铺</a> <img src="data:images/taobao_relation.jpg" alt="relation" /></td>
49 </tr>
50 <tr id="product3">
51 <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3" onclick="selectSingle()"/></td>
52 <td class="cart_td_2"><img src="data:images/taobao_cart_03.jpg" alt="shopping"/></td>
53 <td class="cart_td_3"><a href="#">蝶妆海??蓝清滢粉底液10#（象牙白）</a><br />
54 保障：<img src="data:images/taobao_icon_01.jpg" alt="icon" /> <img src="data:images/taobao_icon_02.jpg" alt="icon" /></td>
55 <td class="cart_td_4">3</td>
56 <td class="cart_td_5">85.00</td>
57 <td class="cart_td_6"><img src="data:images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_3','minus')" class="hand"/> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly"/> <img src="data:images/taobao_adding.jpg" alt="add" onclick="changeNum('num_3','add')" class="hand"/></td>
58 <td class="cart_td_7"></td>
59 <td class="cart_td_8"><a href="javascript:deleteRow('product3');">删除</a></td>
60 </tr>
61
62 <tr>
63 <td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a> <img src="data:images/taobao_relation.jpg" alt="relation" /></td>
64 </tr>
65 <tr id="product4">
66 <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4" onclick="selectSingle()" /></td>
67 <td class="cart_td_2"><img src="data:images/taobao_cart_04.jpg" alt="shopping"/></td>
68 <td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />
69 保障：<img src="data:images/taobao_icon_01.jpg" alt="icon" /></td>
70 <td class="cart_td_4">12</td>
71 <td class="cart_td_5">12.00</td>
72 <td class="cart_td_6"><img src="data:images/taobao_minus.jpg" alt="minus" onclick="changeNum('num_4','minus')" class="hand"/> <input id="num_4" type="text" value="2" class="num_input" readonly="readonly"/> <img src="data:images/taobao_adding.jpg" alt="add" onclick="changeNum('num_4','add')" class="hand"/></td>
73 <td class="cart_td_7"></td>
74 <td class="cart_td_8"><a href="javascript:deleteRow('product4');">删除</a></td>
75 </tr>
76
77 <tr>
78 <td colspan="3"><a href="javascript:deleteSelectRow()"><img src="data:images/taobao_del.jpg" alt="delete"/></a></td>
79 <td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
80 可获积分 <label class="yellow" id="integral"></label> 点<br />
81 <input name=" " type="image" src="data:images/taobao_subtn.jpg" /></td>
82 </tr>
83 </form>
84 </table>
85 <div style="text-align:center;">
86 <p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
87 </div>
88 </div>转载于:https://www.cnblogs.com/jgwz/p/6281661.html
复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选相关推荐
- jquery设置复选框为只读_checkbox设置复选框的只读效果不让用户勾选
在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...
- 纯css3实现美化复选框和手风琴效果（详细）
关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉 ,然后给选框 绑定一个label标签. 然后用label标签作为容器,在里面放一个:before或一个after 用bef ...
- 实现复选框的单选效果
<!DOCTYPE> <html> <head> <title>实现复选框的单选效果</title> </head> <b ...
- Java导出带有单选款（radio）和复选框(checkbox)选中效果的word doc文档-Freemarker实现方式
今天客户提出要求,要求把表数据导出成为word文档格式.导成word格式的这种需求很寻常,但是看到word模板里面的这种单选框和多选框(如下图),要求实现选中效果,我就有点懵B了.到处百度,googl ...
- html复选框不可修改,html设置复选框的只读效果
在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...
- Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作
60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list ca ...
- 多选框实现单选效果，并且把中文值赋值到特定输入框
//多选框实现单选效果,并且把中文值赋值到特定输入框 function radioCheckBox(obj) {var checkBoxAll = document.getElementsByName ...
- 选择屏幕——按钮、单选复选框
12.6. 按钮.单选复选框.下拉框的FunCode 如果复选框与单选按钮没有设置Function Code,则它们就会像普通的输入框一样,即使状态发生了改变,也不会触发PAI事件 对话屏幕中 ...
- 在DataGrid中选择,确认,删除多行复选框列表
在DataGrid中选择,确认,删除多行复选框列表 Selecting, Confirming & Deleting Multiple Checkbox Items In A DataGrid ...
最新文章
- 【原创】ASP.NET C# 压缩和解压缩文件、文件夹函数（测试通过）
- Android 用MediaRecorder录制视频太短崩的问题
- Linux系统安全及应用（账号控制、su、sudo、开关机安全控制、终端登录安全控制等）
- poj3422 Kaka's Matrix Travels(最小费用最大流问题)
- java web输出语句到控制台_Java工程师(6）.循环结构
- P5706 【深基2.例8】再分肥宅水--2022.02.13
- HTML网页设计综合题,网页设计（Html5）试题C卷
- BMap：JavaScript API
- 基于OpenSSL的HTTPS通信C++实现
- CountDownLatch 多线程使用示例
- 未来教育 ***java二级考试题库第二十五套错题***
- 手机CAD如何快速看图下载？
- G950U破解电信4G正确姿势
- Linux - Centos7 查询系统安装时间以及硬盘序列号命令
- python实现协同过滤算法
- linux打印机设置密码,linux桌面打印机配置指南 | 高蛋白网
- Chrome浏览器无法访问网页（移动硬盘）
- PPT 插入无限循环滚动的图片
- 媒体查询、px和rem转换、浏览器兼容、手机端视频播放解决方案
- 产品设计过程中的沉没成本和禀赋效应