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、代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>演示文档</title>
 </head>
 <body>
     <form action="#" method="post" name="form01">
         <p>选择课程：</p>
         <p>全选：<input type="checkbox" name="all" value="全选" onclick="checkAll(this.checked)"></p>
         <p><input type="checkbox" name="check" value="A" >HTML5
         <input type="checkbox" name="check" value="B">PHP
         <input type="checkbox" name="check" value="C">JAVA</p>
 </form>
 <script type="text/javascript">
     function checkAll(c){
         var arr=document.getElementsByName('check')
         // alert(arr.length)
         if (c) {
             for (var i = 0;i<arr.length;i++){
                 arr[i].checked=true;
             }
             }else{
                 for(var i=0;i<arr.length;i++){
                     arr[i].checked=false;
                 }
             }
         }

 </script>
 </body>
 </html>