<!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>
![[position]返回顶部](http://pic.xiahunao.cn/[position]返回顶部)
