前军教程网

首先需求是：

需求1:全选/全不选 多选框有一个单击事件,后面三个多选框的checked值跟随他.

需求2:下面那三个多选框,都有点击事件: 如果刚好下面三个都是选中的状态,那么上面那个多选框跟着选中

页面显示效果如下图

然后html和css代码如下

<style>

* {

margin: 0;

padding: 0;

}
table { border-collapse: collapse; border-spacing: 0; 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>

<table>

<tr>

<th>

<input type="checkbox" name="" id="checkAll" />全选/全不选

<button id="reCheck">反选</button>

</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>

js逻辑代码如下

js附加一下

//1.获取元素

let checkAll = document.getElementById('checkAll');

let chks = document.getElementsByName('check'); //下面三个多选框

let reCheck = document.getElementById('reCheck'); //反选

//2.给上面那个多选框设置点击事件

checkAll.onclick = function () {

//console.log(this);

//获取他自己的checked值

let checkedValue = this.checked;

console.log(checkedValue);

//遍历下面三个多选框,分别设置他们的checked为checkedValue

for (let i = 0; i < chks.length; i++) {

chks[i].checked = checkedValue;

}

}

//3.遍历出下面三个多选框,分别设置点击事件. for (let i = 0; i < chks.length; i++) { chks[i].onclick = function () { //alert(1); //判断下面三个是否全部选中. //假设下面三个多选框都选中了 let flag = true; //验证 for (let j = 0; j < chks.length; j++) { if (chks[j].checked == false) { //假设失败 flag = false; break; } } //对假设结果做处理: 如果验证完了flag的值还是为true,说明假设成立 // if(flag == true){ // checkAll.checked = true; // }else { // checkAll.checked = false; // } //上面这个if-else结构可以简写. checkAll.checked = flag; } }

//4.反选 reCheck.onclick = function () { //遍历下面三个多选框,取他们原来的checked取反,重新赋值给他们自己 for (let i = 0; i < chks.length; i++) { chks[i].checked = !chks[i].checked; }
//判断是否全部选中,如果全部选中,上面的多选框也要跟着选中. //假设下面三个多选框都选中了 let flag = true; //验证 for (let j = 0; j < chks.length; j++) { if (chks[j].checked == false) { //假设失败 flag = false; break; } } //对假设结果做处理: 如果验证完了flag的值还是为true,说明假设成立 checkAll.checked = flag;
}

以上就是js的基础点餐系列