js实现-小框框全选

点击全选下面单独的肉也会全选,再次点击取消

js实现-小框框全选

一个一个点击肉,点完--全选也会被选上

js实现-小框框全选

HTML代码---CSS略

<table>
<tr>
<th>
<input type="checkbox" id="checkAll" /> 全选/全不选
</th>
<th>名字</th>
<th>店铺</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="dx" />
</td>
<td>红烧肉</td>
<td>隆*脚饭</td>
<td>¥200</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="dx" />
</td>
<td>香酥排骨</td>
<td>隆*脚饭</td>
<td>¥998</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="dx" />
</td>
<td>北京烤鸭</td>
<td>隆*脚饭</td>
<td>¥88</td>
</tr>
</table>

JavaScript代码

<script>
// 获取全选
var all = document.getElementById('checkAll');
// 获取单独菜,选择
var xiao = document.getElementsByClassName('dx');
// 点击全选,触发事件
all.onclick = function () {
// 循环单选
for (var i = 0; i < xiao.length; i++) {
xiao[i].checked = all.checked;
}
} // 反选
// 外圈循环,事件次数
for (var i = 0; i < xiao.length; i++) {
// 事件
xiao[i].onclick = function () {
// 循环单选次数,判断是否chenked是否为true
for (var a = 0; a < xiao.length; a++) {
if(xiao[a].checked == false) {
break;
}
}
//则循环次数完成.所有单独都为true,则all为true
a == xiao.length ? all.checked = true : all.checked = false;
}
}
</script> 表述不好。
上一篇:vivo 手机 video 标签无法播放视频解决方案


下一篇:改善 ASP.NET MVC 代码库的 5 点建议