效果图(上传失败了,后续会补充):
代码:
<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>¥200td> tr> <tr> <td> <input type="checkbox" name="check"/> td> <td>香酥排骨td> <td>隆江猪脚饭td> <td>¥998td> tr> <tr> <td> <input type="checkbox" name="check"/> td> <td>北京烤鸭td> <td>隆江猪脚饭td> <td>¥88td> 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;ifunction ( ) { //使用开关思想来检测下方所有选择框是否被选中 //先假设全部都是选中状态 var isAllChecked = true; for(var j = 0;j//只要有一个不是选中状态,isAllChecked就为false if(chkList[j].checked == false){ isAllChecked =