微信扫一扫打赏支持

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>

 

 
 
posted @ 2018-06-12 19:42  范仁义  阅读(733)  评论(0)  编辑  收藏  举报