效果图(上传失败了,后续会补充):
代码:
<!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; } } </