全選反選
阿新 • • 發佈：2021-07-09
<!DOCTYPEhtml>
<htmllang="en">
<head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> </head>
<body> <inputtype="checkbox"id="checkAll">
<br>
<inputtype="checkbox"class="checkOne"> <inputtype="checkbox"class="checkOne"> <inputtype="checkbox"class="checkOne"> <inputtype="checkbox"class="checkOne"> <script> //獲取元素 varocheckAll=document.querySelector('#checkAll') varoCheckOnes=document.querySelectorAll('.checkOne') //全選 ocheckAll.onclick=function(){ for(vari=0;i<oCheckOnes.length;i++){ oCheckOnes[i].checked=this.checked } } //反選
//迴圈繫結點選事件 for(vari=0;i<oCheckOnes.length;i++){ oCheckOnes[i].onclick=function(){
for(varj=0;j<oCheckOnes.length;j++){ if(!oCheckOnes[j].checked){ break } } ocheckAll.checked=j===oCheckOnes.length } }
</script> </body>
</html>
<head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> </head>
<body> <inputtype="checkbox"id="checkAll">
<br>
<inputtype="checkbox"class="checkOne"> <inputtype="checkbox"class="checkOne"> <inputtype="checkbox"class="checkOne"> <inputtype="checkbox"class="checkOne"> <script> //獲取元素 varocheckAll=document.querySelector('#checkAll') varoCheckOnes=document.querySelectorAll('.checkOne') //全選 ocheckAll.onclick=function(){ for(vari=0;i<oCheckOnes.length;i++){ oCheckOnes[i].checked=this.checked } } //反選
//迴圈繫結點選事件 for(vari=0;i<oCheckOnes.length;i++){ oCheckOnes[i].onclick=function(){
for(varj=0;j<oCheckOnes.length;j++){ if(!oCheckOnes[j].checked){ break } } ocheckAll.checked=j===oCheckOnes.length } }
</script> </body>
</html>