学习笔记
1.全选按钮 被单击 循环所有单选按钮 的选中状态等于 全选按钮的 选中状态
2.给每个单选按钮添加 点击事件 在事件里面 添加一个变量 用于设置全选按钮 ，在添加循环 判断单选按钮的 选中状态 如何单选按钮 全部选中 变量就为true ，全选按钮就选中
<body>
<!-- //当全选按钮选中，其他单选按钮也选中
//当单选按钮全部选中 ，全选按钮也选中 -->
<div>
<input type="checkbox" name="" id="All">全选
<ul>
<li> <input type="checkbox" name="" id="">a选项</li>
<li> <input type="checkbox" name="" id="">b选项</li>
<li> <input type="checkbox" name="" id="">c选项</li>
</ul>
</div>
<script>
var All = document.querySelector('#All'); //全选按钮
var AllInput = document.querySelectorAll('li>input'); //所有单选按钮
//全选
All.addEventListener('click', function() {
//循环所有单选按钮 让单选按钮的选中状态 等于 全选按钮 选中状态
for (var i = 0; i < AllInput.length; i++) {
AllInput[i].checked = All.checked;
}
});
//单选
//循环所有单选按钮 给单选按钮 添加点击事件
for (var i = 0; i < AllInput.length; i++) {
AllInput[i].addEventListener('click', function() {
var f = true;
for (var x = 1; x < AllInput.length; x++) {
if (!AllInput[x].checked) { //循环判断 单选按钮的状态 一个为选中 就是false
f = false;
break // 跳出循环
}
}
All.checked = f; //当单选按钮全部选中 全选按钮 选中状态等于 true
});
}
</script>
</body>
