DOM操作案例之--全选与反选

全选与反选在表单类的项目中还是很常见的，电商项目中的购物车一定少不了这个功能。

下面我只就用一个简单的案例做个演示吧。

<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>小米手机</td><td>2000</td></tr><tr><td><input type="checkbox"/></td><td>ThinkPad</td><td>5000</td></tr><tr><td><input type="checkbox"/></td><td>iPhone7</td><td>5000</td></tr><tr><td><input type="checkbox"/></td><td>iPhoneX</td><td>9000</td></tr></tbody></table>

上面是是HTML部分代码，做了一个表格。

下面是css代码：

<style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 300px;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style>

下面是js代码，实现全选反选功能。

<script>var all = document.getElementById("j_cbAll");var tbody = document.getElementById("j_tb");var checkboxes = tbody.getElementsByTagName("input");//下面的单选框//点击all 让下面的的选中状态和all一致all.onclick = function () {for (var i = 0; i < checkboxes.length; i  ) {checkboxes[i].checked = all.checked;}};//让下面的影响上面//点击每一个都判断 如果每一个都选中了 all就选中 否则不选中for (var i = 0; i < checkboxes.length; i  ) {checkboxes[i].onclick = function () {var isCheckedAll = true;for (var i = 0; i < checkboxes.length; i  ) {if (!checkboxes[i].checked) {isCheckedAll = false;break;}}all.checked = isCheckedAll;};}</script>

上面就是这个案例的效果了。

当然，这个还可以扩展一下，做成一个购物车的案例。

更多专业前端知识，请上【猿2048】www.mk2048.com

DOM操作案例之--全选与反选相关推荐

JQuery实现复选框CheckBox的全选、反选、提交操作
对复选框最基本的应用,就是对复选框进行全选.反选和提交等操作.复杂的操作需要与选项挂钩,来达到各种级联反应效果. [示例]使用Jquery实现复选框CheckBox的全选.反选.提交操作. (1)创建 ...
axure实现复选框全选_jq简单的全选、反选和全不选效果
jquery是很实用和方便的前端效果库,可以让我减少很多的操作和节省很多的时间.今天,我们来说一下jq的全选.全不选和反选效果,本篇讲的是最简单简洁的jq全选.全不选和反选的例子.如果还有什么其他的功 ...
js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
Jquery 全选、反选问题解析
最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...
layui结合form,table的全选、反选v1.0
layui结合form,table的全选.反选v1.0 需要引入layui.css和layui.js html代码如下: <div class="layui-form"> ...
icheck结合datatable使用方法及实现全选、反选功能
icheck结合datatable使用方法及实现全选.反选功能一.icheck使用方法 1.引入必要文件(皮肤的css及icheck的js) 皮肤文件选中和其它组件风格一致就好 jquery的引入需 ...
Ext js 4 全选和反选
Ext版本:4.2 相信经常做Grid的一定遇到全选和反选吧,虽然Ext里有SelectionMode可以直接使用,但是面对较复杂的业务,SelectionMode也力不从心于是自己定义一个Chec ...
Android开发中ListView多屏的全选、反选功能
[size=medium] 鄙人最近刚开始学习Android,在练习的时候写到一个ListView的全选反选功能.本来以为这个功能很简单,随随便便就能搞定,结果真的下手去做的时候被虐的死去活来,不知道 ...

DOM操作案例之--全选与反选

DOM操作案例之--全选与反选相关推荐

最新文章

热门文章