设为首页
收藏本站
开启辅助访问
切换到宽版
登录
立即注册
快捷导航
发布信息
搜索
搜索
网站首页
自丢网
社区论坛
自丢网论坛
附件中心
源码下载
邀请码
丢币充值
帖子
搜索附件
搜索附件
自丢网
›
附件中心
›
建站程序/IT教程
›
JavaScript教程
›
全选取消全选案例js教程.jpg
板块导航
+
模板下载
+
建站程序/IT教程
·
源码下载
·
修罗xiuno教程
·
Discuz教程
·
zzz资源/教程
·
织梦教程
·
服务器教程
·
数据库教程
·
Html/Html5教程
·
JavaScript教程
·
Css/Css3教程
·
建站/web前端教程
·
PHP教程
·
其他编程教程
·
小程序app教程
·
PPT模板/素材
·
Word简历模板/素材
·
Excel模板/素材
·
素材中心
·
百科知识
+
综合教程资源
热门下载
左侧广告
版权所有:自丢网
For 2020-2050 ©
zidiu.com
全选取消全选案例js教程.jpg
打开方式: 图片查看器
资料大小: 16 KB
下载次数: 310
上传会员:
admin
上传时间: 2020-02-14
本站网址:
www.zidiu.com
查看附件所在的主题
下载附件
复制链接推荐给好友
点击附件下载:下载附件
js表单全选取消全选案例:
业务需求:
1.点击上面全选复选框,下面所有的复选框都选中(全选)
2.再次点击全选复选框,下面所有的复选框都不中选(取消全选)
3.如果下面复选框全部选中,上面全选按钮就自动选中
4.如果下面复选框有一个没有选中,上面全选按钮就不选中
5.所有复选框一开始默认都没选中状态
js案例代码:
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
var j_cbAll = document.querySelector('#j_cbAll');
var ipts = document.querySelector('#j_tb').querySelectorAll('input')
j_cbAll.onclick = function() {
for (var i = 0; i < ipts.length; i++) {
ipts[i].checked = this.checked;
}
}
for (var i = 0; i < ipts.length; i++) {
ipts[i].onclick = function() {
flag = true;
for (i = 0; i < ipts.length; i++) {
if (!ipts[i].checked) {
flag = false;
break;
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
复制代码
break在这里提高效率。