js进阶 9-16 如何实现多选框全选和取消
js进阶 9-16 如何实现多选框全选和取消
一、总结
一句话总结：选择取到每一个checkbox的值，然后赋值为true或者false就好。
1、如何实现多选框全选和取消？
选择取到每一个checkbox的值，然后赋值为true或者false就好。
17 var arr=document.getElementsByName('check')
18 // alert(arr.length)
19 if (c) {
20 for (var i = 0;i<arr.length;i++){
21 arr[i].checked=true;
2、实现多选框全选和取消用到的是checkbox的哪个重要属性？
checked
二、js进阶 9-16 如何实现多选框全选和取消
1、案例描述
实现多选框全选和取消
2、相关知识：单选和复选框
通常使用input元素来创建单选和复选框，的属性和方法相同，两者属性和方法相同，具有input元素共有的其他属性和方法。
属性
- 属性：id/form/name/type/disabled.......
- Checked 设置或返回 checkbox 是否应被选中
- defaultChecked 返回 checked 属性的默认值。
方法
- click() 模拟在 checkbox 中的一次鼠标点击。
- blur()、focus()
3、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文档</title> 6 </head> 7 <body> 8 <form action="#" method="post" name="form01"> 9 <p>选择课程：</p> 10 <p>全选：<input type="checkbox" name="all" value="全选" onclick="checkAll(this.checked)"></p> 11 <p><input type="checkbox" name="check" value="A" >HTML5 12 <input type="checkbox" name="check" value="B">PHP 13 <input type="checkbox" name="check" value="C">JAVA</p> 14 </form> 15 <script type="text/javascript"> 16 function checkAll(c){ 17 var arr=document.getElementsByName('check') 18 // alert(arr.length) 19 if (c) { 20 for (var i = 0;i<arr.length;i++){ 21 arr[i].checked=true; 22 } 23 }else{ 24 for(var i=0;i<arr.length;i++){ 25 arr[i].checked=false; 26 } 27 } 28 } 29 30 </script> 31 </body> 32 </html>
