對於JS初學者來說，一個完整的購物車實現還是挺難的，邏輯功能挺多。寫出完整功能，能提升不少JS基礎，下面實現購物車全選多選按鈕功能：
首先HTML及CSS部分：
<style> table { border-collapse: collapse; } td { border: 1px solid #000000; width: 100px; height: 30px; text-align: center; } </style> <body> <table> <tr> <td> <label for="allCheck">全選</label><br><input id="allCheck" type="checkbox"> </td> </tr> <tr> <td> <input id="check0" type="checkbox"> </td> </tr> <tr> <td> <input id="check1" type="checkbox"> </td> </tr> <tr> <td> <input id="check2" type="checkbox"> </td> </tr> <tr> <td> <input id="check3" type="checkbox"> </td> </tr> <tr> <td> <input id="check4" type="checkbox"> </td> </tr> </table>
然后是JS部分：
<script>
var allcheck = document.getElementById("allCheck") //獲取全選框
allcheck.addEventListener("click",clickHandler) //給全選框按鈕添加點擊屬性
for(var i=0;i<5;i++){
var check = document.getElementById("check"+i) //遍歷每個多選按鈕
check.addEventListener("click",clickHandler); //給每個多選框添加點擊屬性
}
function clickHandler(){
if(allcheck === this){ //進行判斷 如果你點擊的是全選按鈕 那么多選按鈕也就全部被選中
for(var i=0;i<5;i++){
var check = document.getElementById("check"+i);
check.checked = allcheck.checked;
}
return; //結束
}
for(var j=0;j<5;j++){
var checks = document.getElementById("check"+j);
if(!checks.checked){ 這一部分代碼用來多選按鈕是否被選中 遍歷所有的多選按鈕 如果有一個多選按鈕沒有被選中 那么全選按鈕就不會被選中
allcheck.checked = false;
return; //結束
}
}
allcheck.checked = true; //不好理解 看不懂可以一步一步運行代碼
}
</script>
全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid #000000;
width: 100px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<label for="allCheck">全選</label><br><input id="allCheck" type="checkbox">
</td>
</tr>
<tr>
<td>
<input id="check0" type="checkbox">
</td>
</tr>
<tr>
<td>
<input id="check1" type="checkbox">
</td>
</tr>
<tr>
<td>
<input id="check2" type="checkbox">
</td>
</tr>
<tr>
<td>
<input id="check3" type="checkbox">
</td>
</tr>
<tr>
<td>
<input id="check4" type="checkbox">
</td>
</tr>
</table>
<script>
var allcheck = document.getElementById("allCheck")
allcheck.addEventListener("click",clickHandler)
for(var i=0;i<5;i++){
var check = document.getElementById("check"+i)
check.addEventListener("click",clickHandler);
}
function clickHandler(){
if(allcheck === this){
for(var i=0;i<5;i++){
var check = document.getElementById("check"+i);
check.checked = allcheck.checked;
}
return;
}
for(var j=0;j<5;j++){
var checks = document.getElementById("check"+j);
if(!checks.checked){
allcheck.checked = false;
return;
}
}
allcheck.checked = true;
}
</script>
</body>
</html>
效果如下：
