本节要讲的是：点击按钮，实现全选或取消选中所有的选择框。
本案例主要是操作选择框的checked属性，并且涉及标签遍历等相关内容。
通过以上的提示，大家应该可以自己做出来，请动手试试看，如果确实做不出来再看下面的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现全选/取消选中所有的选择框</title>
</head>
<body class="" id="body">
请选择爱好：
<input class="hobby" type="checkbox" name="">读书
<input class="hobby" type="checkbox" name="">写字
<input class="hobby" type="checkbox" name="">画画
<br>
<input type="checkbox" id="check_all">全选
<script type="text/javascript">
//全选选中， 前面的爱好都选中
//全选没选中，全面的爱好都不选中
//知识点： .checked属性 表示选中状态/ 遍历数组 设置属性值
//获取全选标签
var check_all = document.getElementById('check_all');
//绑定 点击事件/change事件
check_all.onchange = function () {
//获取到全选的选中状态 checked属性
var status = check_all.checked;// 选中true 没选中false
//获取所有的爱好的checkbox标签
var hobbys = document.querySelectorAll('.hobby');
//对每一个爱好的标签，需要设置checked属性
//遍历数组
for (var i = 0; i < hobbys.length; i++) {
// 让每一个爱好的选中状态 和 全选 保持一致 checked属性值要一样
hobbys[i].checked = status;
//或者这样
// if(status == true){
// hobbys.checked = true;
// }else{
// hobbys.checked = false;
// }
}
}
</script>
</body>
</html>
|
窥视卡
雷达卡
发表于 2023-1-26 22:39:53
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-20 10:40:15
