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>