js实现多选框的全选/全不选

最新推荐文章于 2023-01-08 21:53:32 发布

simpletonn

最新推荐文章于 2023-01-08 21:53:32 发布

阅读量610

点赞数

分类专栏： js基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_21544221/article/details/78230882

版权

js基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.οnlοad=function(){
var aQQ = document.getElementById('qq');
var oSpan = document.getElementsByTagName('span')[0];
var oBox = document.getElementById('box');
var oRadio = oBox.getElementsByTagName('input');
var chek = function(){
var chekNum = 0;
for(var j=0;j<oRadio.length;j++){
if(oRadio[j].checked){
chekNum++;
}
}
aQQ.checked = (oRadio.length == chekNum);
}
aQQ.οnclick=function(){
for(var i=0;i<oRadio.length;i++){
oRadio[i].checked = this.checked;
}
aQQ.checked = this.checked;
var txt;
this.checked ? txt = '全不选' : txt = '全选';
oSpan.innerHTML = txt;
}
for(var j=0;j<oRadio.length;j++){
oRadio[j].onclick = function(ev){
ev = ev || event;
ev && ev.stopPropagation ? ev.stopPropagation() : window.event.cancelBubble=true;
chek();
}
}
}
</script>
</head>
<body>
<div>
<label><input type="checkbox" id='qq'/><span>全选</span></label>
</div>
<div id="box">
<label><input name="Fruit" type="checkbox" value="" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="" />梨 </label>
</div>

</body>