前端学习（2282）全选和反选问题
生活随笔
收集整理的這篇文章主要介紹了
前端学习（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）全选和反选问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gaster字体转换器_Galas字体转
- 下一篇： 前端学习（2440）：axios处理文章