前端学习（2282）全选和反选问题

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">#f {font-size: 50px;font-family: 幼圆;}#fater {width: 100%;height: 100%;border: 2px solid black;}#btn {width: 50px;height: 30px;opacity: 0.5;background-color: palegoldenrod;}#btn:hover {background-color: burlywood;opacity: 1;}.fonts {line-height: 200px;font-size: 20px;float: right;font-family: 幼圆;}.fontss {line-height: 200px;font-size: 30px;text-align: center;font-family: 幼圆;}.trs:hover {background-color: palegoldenrod;}.trs {position: ;}.delete-btn {height: 100px;width: 90px;opacity: 0.6;}.a {float: left;text-align: center;line-height: 20px;}#wind {width: 100px;height: 50px;}#last-delete {width: 60px;height: 40px;}#num {color: red;}#main-num {color: red;}.delete-btn:hover {background-color: #DEB887;}/**/#add {width: 20px;height: 20px;position: absolute;left: 40px;top: 0px;}#minus {width: 20px;height: 20px;position: absolute;left: 0px;top: 0px;}#btn-div {width: 20px;height: 19px;border: 0.1px solid black;position: absolute;left: 20px;}#father1 {width: 59px;height: 20px;border: 0.1px solid black;position: absolute;left: 1120px;}.td {position: relative;}/*second-senior btn*/#add2 {width: 20px;height: 20px;position: absolute;left: 40px;top: 0px;}#minus2 {width: 20px;height: 20px;position: absolute;left: 0px;top: 0px;}#btn-div2 {width: 20px;height: 19px;border: 0.1px solid black;position: absolute;left: 20px;}#father2 {width: 59px;height: 20px;border: 0.1px solid black;position: absolute;left: 1120px;}/*thried-senior btn*/#add3 {width: 20px;height: 20px;position: absolute;left: 40px;top: 0px;}#minus3 {width: 20px;height: 20px;position: absolute;left: 0px;top: 0px;}#btn-div3 {width: 20px;height: 19px;border: 0.1px solid black;position: absolute;left: 20px;}#father3 {width: 59px;height: 20px;border: 0.1px solid black;position: absolute;left: 1120px;}/*fourth-senior btn*/#add4 {width: 20px;height: 20px;position: absolute;left: 40px;top: 0px;}#minus4 {width: 20px;height: 20px;position: absolute;left: 0px;top: 0px;}#btn-div4 {width: 20px;height: 19px;border: 0.1px solid black;position: absolute;left: 20px;}#father4 {width: 59px;height: 20px;border: 0.1px solid black;position: absolute;left: 1120px;}.foodsbtn {}.check-all {}</style>
</head><body bgcolor="beige"><button id="btn">返回</button><div id="fater"><table border="1"><tr><th><input type="checkbox" id="ch-all">全选</th><th width="600px" height="30px">商品</th><th width="350px" height="30px">单价</th><th width="250px" height="30px">数量</th><th width="100px" height="30px">小计</th><th width="100px" height="30px">操作</th><tbody id="trs"><tr class="trs"><td><input type="checkbox" id="hh-all" class="foodsbtn"></td><td width="600px" height="260px" valign="center "><img src="img/伍六七.png" width="400px" height=100%><p class="fonts">特价伍六七</p></td><td width="350px" height="260px"><p class="fontss">99</p></td><td width="250px" height="260px"><div id="father1"><button id="minus">-</button><div id="btn-div"><center></center></div><button id="add">+</button></div></td><td width="100px" height="260px"><p class="fontss">0</p></td><td width="100px" height="260px"><p class="fontss"><button class="delete-btn">删除</button></p></td></tr><tr class="trs"><td><input type="checkbox" id="hh-all" class="foodsbtn"></td><td width="600px" height="260px"><img src="img/姜主任.png" width="400px" height=100%><p class="fonts">新品姜主任</p></td><td width="350px" height="260px"><p class="fontss">599</p></td><td width="250px" height="260px"><div id="father2"><button id="minus2">-</button><div id="btn-div2"><center></center></div><button id="add2">+</button></div></td><td width="100px" height="260px"><p class="fontss">0</p></td><td width="100px" height="260px"><p class="fontss"><button class="delete-btn">删除</button></p></td></tr><tr class="trs"><td><input type="checkbox" id="hh-all" class="foodsbtn"></td><td width="600px" height="260px"><img src="img/梅花十三1.png" width="400px" height=100%><p class="fonts">特价梅花十三</p></td><td width="350px" height="260px"><p class="fontss">199</p></td><td width="250px" height="260px"><div id="father3"><button id="minus3">-</button><div id="btn-div3"><center></center></div><button id="add3">+</button></div></td><td width="100px" height="260px"><p class="fontss">0</p></td><td width="100px" height="260px"><p class="fontss"><button class="delete-btn">删除</button></p></td></tr><tr class="trs"><td><input type="checkbox" id="hh-all" class="foodsbtn"></td><td width="600px" height="260px"><img src="img/梅花十三2.png" width="400px" height=100%><p class="fonts">正品梅花十三</p></td><td width="350px" height="260px"><p class="fontss">699</p></td><td width="250px" height="260px"><div id="father4"><button id="minus4">-</button><div id="btn-div4"><center></center></div><button id="add4">+</button></div></td><td width="100px" height="260px"><p class="fontss">0</p></td><td width="100px" height="260px"><p class="fontss"><button class="delete-btn">删除</button></p></td></tr></tbody><table><tr><th width="10px" height="50px"><input type="checkbox" class="check-all" id="ccc"></th><th width="50x" height="50px"><p id="a">全选</p></th><th width="1000px" height="20px"><button id="last-delete">删除</button></th><th width="200px" height="50px">已选商品<span id="num">0</span>件<button id="other"></button></th><th width="100px" height="50px">合计:<span id="main-num">0</span>元</th><th width="100px" height="50px"><button id="wind">结算</button></th></tr></table></table></div><script type="text/javascript">//全选var chall = document.getElementById('ch-all')var trs = document.getElementById('trs')var inputs = trs.getElementsByTagName("input");/* var foodsbtn = document.getElementsByClassName("foodsbtn");var checkall = document.getElementsByClassName("check-all"); */console.log(chall)console.log(trs)console.log(inputs)chall.onclick = function() {//如果是checkbox，设置状态与父状态一致for (var i = 0; i < inputs.length; i++) {var input = inputs[i];if (input.type === "checkbox") {input.checked = this.checked;}}}//全选问题：当子的checkbox全部被选中，那父的checkbox也要被选中。如果有一个子的checkbox没有被选中，那么父的checkbox也不被选中//基本思路，每当点击了一个子的checkbox时，都要判断是否所有的checkbox都被选中了//遍历所有的checkbox注册点击事件for (var i = 0; i < inputs.length; i++) {var input = inputs[i];if (input.type != "checkbox") {continue;}//判断是不是所有的checkbox都被选中，给子checkbox注册点击事件input.onclick = function() {checkAllCheckBox();}}function checkAllCheckBox() {//假设所有的子的checkbox都被选中var isAllChecked = true;//判断是不是所有的子的checkbox都被选中，所以又要循环找到所有的checkbox进行判断for (var j = 0; j < inputs.length; j++) {var input = inputs[j];if (input.type != "checkbox") {continue;}//判断当前的checkbox是否都被选中if (input.checked == false) {isAllChecked = false;}}//设置父的checkbox的状态chall.checked = isAllChecked;}//反选//给反选按钮注册点击事件var ccc = document.getElementById("ccc");console.log(ccc)ccc.onclick = function() {//找到所有的子的checkbox，让其反选for (var i = 0; i < inputs.length; i++) {var input = inputs[i];if (input.type != 'checkbox') {continue;}//反选//子的checkboxinput.checked = !input.checked;//反选完之后要判断：父的checkboxcheckAllCheckBox();}}/* checkall.onclick = function() {if (checkall.checked == true) {for (var i = 0; i < foodsbtn.length; i++) {foodsbtn[i].checked = true;}} else {for (var i = 0; i < foodsbtn.length; i++) {foodsbtn[i].checked = false;}}} *//*  checkall.addEventListener("click", function() {if (checkall.checked == true) {for (var i = 0; i < foodsbtn.length; i++) {foodsbtn[i].checked = true;}} else {for (var i = 0; i < foodsbtn.length; i++) {foodsbtn[i].checked = false;}}}); *///qqqq按钮//firstvar minus = document.getElementById("minus");var add = document.getElementById("add");var div = document.getElementById("btn-div");var index = 0;add.addEventListener("click", function() {index++;document.getElementById("btn-div").innerHTML = index;});minus.addEventListener("click", function() {if (index < 1) {index = 0;} else {index--;}document.getElementById("btn-div").innerHTML = index;})//secondvar minus2 = document.getElementById("minus2");var add2 = document.getElementById("add2");var div2 = document.getElementById("btn-div2");var index2 = 0;add2.addEventListener("click", function() {index2++;document.getElementById("btn-div2").innerHTML = index2;});minus2.addEventListener("click", function() {if (index2 < 1) {index2 = 0;} else {index2--;}document.getElementById("btn-div2").innerHTML = index2;})//thiredvar minus3 = document.getElementById("minus3");var add3 = document.getElementById("add3");var div3 = document.getElementById("btn-div3");var index3 = 0;add3.addEventListener("click", function() {index3++;document.getElementById("btn-div3").innerHTML = index3;});minus3.addEventListener("click", function() {if (index3 < 1) {index3 = 0;} else {index3--;}document.getElementById("btn-div3").innerHTML = index3;})//fourthvar minus4 = document.getElementById("minus4");var add4 = document.getElementById("add4");var div4 = document.getElementById("btn-div4");var index4 = 0;add4.addEventListener("click", function() {index4++;document.getElementById("btn-div4").innerHTML = index4;});minus4.addEventListener("click", function() {if (index4 < 1) {index4 = 0;} else {index4--;}document.getElementById("btn-div4").innerHTML = index4;})</script>
</body></html>

前端学习（2282）全选和反选问题相关推荐

Jquery 全选、反选问题解析
最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...
DOM操作案例之--全选与反选
全选与反选在表单类的项目中还是很常见的,电商项目中的购物车一定少不了这个功能. 下面我只就用一个简单的案例做个演示吧. <div class="wrap"><ta ...
android二级联动购物车,Android实现二级购物车的全选加反选、总价功能
本文实例为大家分享了Android实现二级购物车的全选加反选.总价的具体代码,供大家参考,具体内容如下 MainActivity import android.support.v7.app.AppCo ...
axure实现复选框全选_jq简单的全选、反选和全不选效果
jquery是很实用和方便的前端效果库,可以让我减少很多的操作和节省很多的时间.今天,我们来说一下jq的全选.全不选和反选效果,本篇讲的是最简单简洁的jq全选.全不选和反选的例子.如果还有什么其他的功 ...
Android开发中ListView多屏的全选、反选功能
[size=medium] 鄙人最近刚开始学习Android,在练习的时候写到一个ListView的全选反选功能.本来以为这个功能很简单,随随便便就能搞定,结果真的下手去做的时候被虐的死去活来,不知道 ...
html复选框全选怎么实现,js html css实现复选框全选与反选
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下 html+css+js实现复选框全选与反选 table,tr,td { border:1px solid red; } fu ...
jq 批量删除 php,PHP基础班初学心得：用JQ实现表单的全选、反选、取消和删除功能...
摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...
Android开发CheckBox控件，全选，反选，取消全选
在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢首先布局我们的界面: <?xml version="1.0" enc ...
checkbox全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
[原]vue实现全选，反选
用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他基本思路如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...

前端学习（2282）全选和反选问题

前端学习（2282）全选和反选问题相关推荐

最新文章

热门文章