案例：點餐選擇框
阿新 • • 發佈：2018-09-29
保持 comment llc utf lis put 同時 mon 點擊
效果圖(上傳失敗了,後續會補充):
代碼:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微軟雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>
<input type="checkbox" name="" id="checkAll"/>全選/全不選
</th>
<th>菜名</th>
<th>商家</th>
<th>價格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check"/>
</td>
<td>紅燒肉</td>
<td>隆江豬腳飯</td>
<td>￥200</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check"/>
</td>
<td>香酥排骨</td>
<td>隆江豬腳飯</td>
<td>￥998</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check"/>
</td>
<td>北京烤鴨</td>
<td>隆江豬腳飯</td>
<td>￥88</td>
</tr>
</table>
<script src="common.js"></script>
</body>
<script>
/**需求分析：1.點擊上方全選/全不選選擇框，實現對應功能
* 2.點擊下方選擇框，如果所有選擇框同時被選中，則上方全選框自動變成勾選狀態，否則是非勾選狀態
*
* 思路分析：
* * 1.獲取界面對應元素，添加事件
* * 2.實現上面選擇框全選全不選功能
* * 3.下方選擇框在點擊時，使用開關思想來檢查是否是全部都選擇的狀態
*/
//1.獲取界面對應元素
var chkAll = id("checkAll");
var chkList = document.getElementsByName("check");
//2.實現上方選擇框全選/全不選功能
chkAll.onclick = function () {
//遍歷下方選擇框，讓他們的勾選狀態與自身保持一致
for (var i = 0; i < chkList.length; i++) {
chkList[i].checked = this.checked;
}
}
//3.下方選擇框點擊事件
for(var i = 0;i<chkList.length;i++){
chkList[i].onclick = function ( ) {
//使用開關思想來檢測下方所有選擇框是否被選中
//先假設全部都是選中狀態
var isAllChecked = true;
for(var j = 0;j<chkList.length;j++){
//只要有一個不是選中狀態，isAllChecked就為false
if(chkList[j].checked == false){
isAllChecked = false;
}
}