//全选反选问题
//在变成的过程中,我们遇到很多的的checkbox等 需要悬着多个
//这里我们写一个例子
//html部分
//声明多个checkbox
//将元素请相同的名称,方便于查找元素
<input type="checkbox" name="" id="allChecked">全选
<input type="checkbox" name="" id="chooseOther">反选<br />
<input type="checkbox" name="workTime" id="">除夕
<input type="checkbox" name="workTime" id="">初一
<input type="checkbox" name="workTime" id="">初二
<input type="checkbox" name="workTime" id="">初三
<input type="checkbox" name="workTime" id="">初四
<input type="checkbox" name="workTime" id="">初五
//js部分
<script>
//声明一个全选
let allChecked = document.getElementById("allChecked");
//反选checkbox
let chooseOther = document.getElementById('chooseOther');
//被选中的的checkbox
let checkboxIsTure = document.getElementsByName('workTime');
//全选事件的函数
allChecked.onclick = function(){
//获取按钮的选中状态
let isCheched = this.checked;
for(let i = 0; i < checkboxIsTure.length; i++){
checkboxIsTure[i].cheched = isCheched ;
}
}
//反选函数
chooseOther.onclick = function(){
for(let i = 0; i < checkboxIsTure.length; i++){
checkboxIsTure[i].cheched = !checkboxIsTure[i].cheched;
}
}
//被选中函数
let count = 0;
for(let i = 0; i < checkboxIsTure.length; i++ ){
//i位置上的元素是否被选中
count = 0;
checkboxIsTure[i].onclick = function(){
//外层循环控制欸选中的
for(let j = 0; j < checkboxIsTure.length; j++){
if(checkboxIsTure[j].cheched){
count++;
}
}
//判断元素是否被全选中,全中的话,全选液压配备选中
if(count == checkboxIsTure.length){
allChecked.checked = true;
}else{
allChecked.checked = false;
}
}
}
</script>
dom应用(全选,反选问题)
最新推荐文章于 2022-02-26 20:49:58 发布