效果图:
<强> 1。目标需求一(共两个):
1。点击上方全?全不选选择框,实现对应功能
2 .点击下方选择框,如果所有选择框同时被选中,则上方全选框自动变成勾选状态,否则是非勾选状态
<强> 2。思路分析:
1。实现上面选择框全选全不选功能,添加上面的鼠标点击事件,让下方所有选择框跟上方一样就行
2 .下方选择框在点击时,使用开关思想来检查是否是全部都选择的状态
<强> 3. js实现步骤:
上方全?全不选选择框,实现步骤
1。获取元素
var chkAll=. getelementbyid (“checkAll”);
var chkList=document.getElementsByName('检查');
2。实现上方选择框全?全不选功能
chkAll。onclick=function () {
我(var=0; i< chkList.length;我+ +){
chkList[我]支票=this.checked;
}
}
3。下方选择框点击
开关思想:当一个操作的结果只有两种状态,就可以使用布尔类型来表示这两种状态isAllOk=true(全部选中)
1。提出假设isAllOk=true
2.验证假设
3 .根据验证结果来实现需求
,,
//3.1遍历下方按钮,检查下方按钮的点击事件
我(var=0; i< chkList.length;我+ +){
chkList[我]。onclick=function () {
var isAllChecked=true;//假设全部都是选中状态
(var j=0; j< chkList.length; j + +) {
如果(chkList [j]支票==false) {
isAllChecked=false;
}
}//检测完毕之后,根据开关的值来设置上方选择框的状态
如果(isAllChecked==true) {
chkAll.checked=true;
}
其他{
chkAll.checked=false;
}
}
}
最后附上完整的代码:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt; style>
* {
保证金:0;
填充:0;
}
表{
边界:1 px固体# c0c0c0;
保证金:100 px的汽车;/*保证金两个值代表上下,左右*/text-align:中心;
宽度:500 px;
border-collapse:崩溃;/*边框合并,如果相邻,则共用一个边框*/}
th {
字体:粗体15 px”微软雅黑”;
background - color: # 09 c;
颜色:# fff;
高度:24 px;
}
td {
边界:1 px固体# d0d0d0;
颜色:# 404060;
填充:15 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; table>
& lt; !——标题是表格的标题——比;
& lt; caption>点餐系统& lt;/caption>
& lt; thead>
& lt; tr>
& lt; th>
& lt;输入类型=案囱】颉眎d=癱heckAll”在全?全不选
& lt;/th>
& lt; th>菜名& lt;/th>
& lt; th>商家& lt;/th>
& lt; th>价格& lt;/th>
& lt;/tr>
& lt;/thead>
& lt; tbody>
& lt; tr>
& lt; td>
& lt;输入类型=案囱】颉眓ame="检查"/比;
& lt;/td>
& lt; td>红烧肉& lt;/td>
& lt; td>隆江猪脚饭& lt;/td>
& lt; td>￥200 & lt;/td>
& lt;/tr>
& lt; tr>
& lt; td>
& lt;输入类型=案囱】颉眓ame="检查"/比;
& lt;/td>
& lt; td>香酥排骨& lt;/td>
& lt; td>隆江猪脚饭& lt;/td>
& lt; td>￥998 & lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> & lt;输入类型=案囱】颉眓ame="检查"/祝辞& lt;/td>
& lt; td>北京烤鸭& lt;/td>
& lt; td>隆江猪脚饭& lt;/td>
& lt; td>￥88 & lt;/td>
& lt;/tr>
& lt;/tbody>
& lt; tfoot>
& lt; tr>
& lt;/tr>
& lt;/tfoot>
& lt;/table>
& lt; script>//1 .获取界面对应元素
var chkAll=. getelementbyid (“checkAll”);
var chkList=document.getElementsByName('检查');//2 .实现上方选择框全?全不选功能
chkAll。onclick=function () {
我(var=0; i< chkList.length;我+ +){
chkList[我]支票=this.checked;
}
}//3 .实现下方选择功能//3.1遍历下方按钮,检查下方按钮的点击事件
我(var=0; i< chkList.length;我+ +){
chkList[我]。onclick=function () {
var isAllChecked=true;//假设全部都是选中状态
(var j=0; j< chkList.length; j + +) {
如果(chkList [j]支票==false) {
isAllChecked=false;
}
}//检测完毕之后,根据开关的值来设置上方选择框的状态,下面也可以简写为checkAll。检查=isAllChecked;
如果(isAllChecked==true) {
chkAll.checked=true;
}
其他{
chkAll.checked=false;
}
}
}
& lt;/script>
& lt;/body>
& lt;/html>
