案例：点餐选择框
Posted gengzhong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了案例：点餐选择框相关的知识，希望对你有一定的参考价值。
效果图(上传失败了,后续会补充):
代码:
<!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;
}
}
//检测完毕之后，根据开关的值来设置上方选择框的状态
checkAll.checked = isAllChecked;
}
}
</script>