js進階 9-16 如何實現多選框全選和取消

時間 2019-11-26

原文原文鏈接

js進階 9-16 如何實現多選框全選和取消

1、總結

一句話總結：選擇取到每個checkbox的值，而後賦值爲true或者false就好。

一、如何實現多選框全選和取消？

選擇取到每個checkbox的值，而後賦值爲true或者false就好。javascript

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;

二、實現多選框全選和取消用到的是checkbox的哪一個重要屬性？

checkedhtml

2、js進階 9-16 如何實現多選框全選和取消

一、案例描述

實現多選框全選和取消java

二、相關知識：單選和複選框

一般使用input元素來建立單選和複選框，的屬性和方法相同，二者屬性和方法相同，具備input元素共有的其餘屬性和方法。post

屬性

屬性：id/form/name/type/disabled.......
Checked 設置或返回 checkbox 是否應被選中
defaultChecked 返回 checked 屬性的默認值。

方法

click() 模擬在 checkbox 中的一次鼠標點擊。
blur()、focus()

三、代碼

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。