javaSrcipt复选框checked复选框全选以及子选框全选代码实现
作者:互联网
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> </style> <body> <form name="form1" method="post" action=""> <input type="checkbox" id="btn1" >全选 <br> <input type="checkbox" class="checkbox" value="checkbox1"> checkbox1 <input type="checkbox" class="checkbox" value="checkbox2"> checkbox2 <input type="checkbox" class="checkbox" value="checkbox3"> checkbox3 <input type="checkbox" class="checkbox" value="checkbox4"> checkbox4 </form> </body> </html> <script> let inp=document.getElementsByClassName('checkbox'); let btn1=document.getElementById('btn1'); //全选 btn1.onclick=function() { for (let i = 0; i < inp.length; i++) { inp[i].checked=btn1.checked; } } //给每个小复选框添加点击事件 for (let i = 0; i < inp.length; i++) { inp[i].onclick=function() { //每次点击都循环判断是否全部选中 let coun=true; for (let j = 0; j < inp.length; j++) { if(!inp[j].checked) { coun=false; } } btn1.checked=coun; } } </script>
标签:checked,inp,复选框,全选,let,btn1 来源: https://www.cnblogs.com/zxbls/p/16545644.html