该文章展示了一段HTML代码，其中包含一个JavaScript函数`qb()`用于实现通过点击一个复选框来全选或全不选具有特定class（此处为kl）的所有复选框。函数通过`getElementById`获取控制端（id=k）的复选框状态，并利用`getElementsByClassName`选取所有需要控制的复选框，然后遍历并更新它们的选中状态。
通过在script中构造函数，实现对标签的控制。
其中id=“”为控制端，class=“”为被控制端，也可以用 name=“”或者name for “”等为被控制端。.
其中class为document.getElementsByClassName；
id为document.getElementById；
在构造的函数中通过for选中所有class，后通过if实现全选和全不选两种情况【注：如果想实现反选的化改变下述代码的if结果即可】。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border-color: aqua;
}
.a{
background-color: aqua;
}
.b{
margin-left: 6px;
}
</style>
<script>
function qb() {
var k = document.getElementById("k");
var kl = document.getElementsByClassName("kl");
if(k.checked==false){
for(var i=0;i<kl.length;i++){
kl[i].checked=false;
}
}else{
for(var i=0;i<kl.length;i++){
kl[i].checked=true;
}
}
}
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10" style="text-align: center;">
<tr>
<td colspan="6" height="20px">商品信息查看</td>
</tr>
<tr class="a">
<td style="border:none"> 选择</td>
<td style="border:none">所属类别</td>
<td style="border:none">商品名称</td>
<td style="border:none">会员价</td>
<td style="border:none">数量</td>
</tr>
<tr>
<td> <label ><input class="kl" type="checkbox"></label></td>
<td>手机</td>
<td>P_L音乐手机</td>
<td>1980</td>
<td>200</td>
</tr>
<tr>
<td > <label ><input class="kl" type="checkbox"></label></td>
<td>玻璃制品</td>
<td>迷你水杯</td>
<td>49</td>
<td>500</td>
</tr>
<tr>
<td> <label >
<input class="kl" type="checkbox">
</label>
</td>
<td>音响</td>
<td>CXO音响</td>
<td>2070</td>
<td>200</td>
</tr>
<tr>
<td> <label >
<input class="kl" type="checkbox">
</label>
</td>
<td>休闲装</td>
<td>休闲上衣</td>
<td>195</td>
<td>500</td>
</tr>
<tr>
<td style="text-align: left;" colspan="6" height="20px"> <label class="b"><input type="checkbox" id="k" οnclick="qb()"> [全选/全不选]</label></td>
</tr>
</table>
</body>
</html>
7243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
