JS实现全选功能

2018-06-24 01:40:47来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

000. 开始

  学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现。

  全选功能是在很多注册页面、获取用户兴趣爱好、让用户勾选一些选项等页面中常见的一种效果,主要有全选/全不选,反选,重置,提交等几个功能。

  现在我们就开一步一步的开始解析代码。另外注意一下,这里面运用到了一些外部的CSS文件和JS文件,单纯的只复制下面的代码可能不会出现你想要的结果,请移步github地址获取完整源代码:

https://github.com/JinganGuo/JavascriptDemos

001. HTML部分

 1 <!--
 2     @authors Guo Jingan (gja1026@163.com)
 3     @date    2018-02-15
 4     @intro      全选功能
 5 !-->
 6 <!DOCTYPE html>
 7 <html lang="en">
 8 <head>
 9     <meta charset="UTF-8">
10     <title>全选功能练习(CheckAll)</title>
11     <link rel="stylesheet" href="style.css">
12     <link rel="stylesheet" type="text/css" href="../commonCSS.css">
13     <script src="checkAll.js"></script>
14 </head>
15 <body>
16     <header>
17         <p>全选功能</p>
18     </header>
19     <form id="myForm" action="#" method="post">
20         请选择您的兴趣爱好:
21         <input type="checkbox" id="checkOrCancelAll"><label for="checkOrCancelAll">全选/取消全选</label>
22 
23         <br><br>
24 
25         <input type="checkbox" name="item" id="football" value="足球"><label for="football">足球</label>
26         <input type="checkbox" name="item" id="running" value="跑步"><label for="running">跑步</label>
27         <input type="checkbox" name="item" id="swimming" value="游泳"><label for="swimming">游泳</label>
28         <input type="checkbox" name="item" id="reading" value="阅读"><label for="reading">阅读</label>
29         <input type="checkbox" name="item" id="coding" value="写代码"><label for="coding">写代码</label>
30 
31         <br><br>
32         
33         <input type="button" class="button" name="choice" id="checkAll" value="全选">
34         <input type="button" class="button" name="choice" id="invert" value="反选">
35         <input type="button" class="button" name="choice" id="reset" value="复位">
36         <input type="button" class="button" id="submit" value="提交">
37 
38     </form>
39 </body>
40 </html>
View Code

   在这个小demo中,第一次学习并运用了<label>标签,将该标签的for属性设置为对应的id属性值,可以在页面中点击文字也能选中对应的checkbox,若不设置便只能点击那个小小的方框才能选中checkbox。

  HTML部分不做介绍,CSS代码也不贴出来了,基本没有什么样。

002. JS部分

  首先,先自定义一个单击响应函数,方便以后我们对指定元素进行单击响应事件绑定。

 1 /**
 2  *设置单击响应函数
 3  * @param  {[String]} objStr [ 要设置单击响应事件的元素的id ]
 4  * @param  {[function]} fun  [ 单击后响应的行为 ]
 5  * @return {[none]}       
 6  */
 7 function myClick(objStr, fun) {
 8     var obj = document.getElementById(objStr);
 9     obj.onclick = fun;
10 }

  

  获取所有可以选择的checkbox可选项:

var hobbies = document.getElementsByName("item");

    

  全选/全不选功能,当用户勾选这个checkbox时,所有选项全选;否则,全不选。

  Checkbox对象有一个属性:checked, 可以用来设置或返回 checkbox 是否应被选中。

  为此checkbox添加一个单击响应函数,函数内部对其进行判定,如果它的状态被勾选(即this.checked == true),则将所有的可选项的checked属性设置为false,反之设置为true。

 1 // 获取全选/全不选选项
 2 var checkOrCancelAll = document.getElementById("checkOrCancelAll");
 3 
 4 // 全选/全不选
 5 myClick("checkOrCancelAll", function() {
 6         if(this.checked){
 7         for (var i = 0; i < hobbies.length; i++) {
 8             hobbies[i].checked = true;
 9         }
10         }else{
11         for (var i = 0; i < hobbies.length; i++) {
12             hobbies[i].checked = false;
13         }
14         }
15 });

 

  全选:将可选项的checked属性设置为ture;

  复位:将可选项的checked属性设置为false;

 1 // 全选
 2 myClick("checkAll", function() {
 3     for (var i = 0; i < hobbies.length; i++) {
 4         hobbies[i].checked = true;
 5     }
 6     checkOrCancelAll.checked = true;
 7 });
 8 
 9 // 复位
10 myClick("reset", function() {
11     for (var i = 0; i < hobbies.length; i++) {
12         hobbies[i].checked = false;
13     }
14     checkOrCancelAll.checked = false;
15 });  

   

  反选:将已经选择的取消,为选择的选中,特别注意那个“全选/全不选”的处理。

 1 // 反选
 2 myClick("invert", function() {
 3     checkOrCancelAll.checked = true;
 4     for (var i = 0; i < hobbies.length; i++) {
 5         
 6         if (hobbies[i].checked) {
 7             hobbies[i].checked = false;
 8             checkOrCancelAll.checked = false;
 9         } else {
10             hobbies[i].checked = true;
11         }
12     }
13 });

 

  基本功能到目前为止差不多实现了,但是还存在一个问题,当用户依次勾选每一个选项时,当全部勾选完,则“全选/全不选”应当被勾选上,再当用户取消了一个选项,则“全选/全不选”应当被取消。

  这个如何实现呢?

  我们可以为每一个可选项的checkbox添加一个单击响应事件,在响应函数内部,将“全选/全不选”默认勾选上,然后进行判断,若存在没有被勾选上的选项,则“全选/全不选”的checked属性赋值为false。

 1 // 给每一个checkbox添加一个单击事件
 2 for (var i = 0; i < hobbies.length; i++) {
 3     hobbies[i].onclick = function() {
 4         checkOrCancelAll.checked = true;
 5         for (var i = 0; i < hobbies.length; i++) {
 6             if (!hobbies[i].checked) {
 7                 checkOrCancelAll.checked = false;
 8                 break;
 9             }
10         }
11     };
12 }

   

  提交

 1 // 提交
 2 myClick("submit", function(){
 3     var result = new Array();
 4     for (var i = 0; i < hobbies.length; i++) {
 5         if(hobbies[i].checked){
 6             result.push(hobbies[i].value);
 7         }
 8     }
 9     if(result.length){
10         alert("您的选择是: \n\n" + result);
11     }else{
12         alert("您暂时没有勾选任何选项!");
13     }
14 
15 });

003. 结束

  以上就是全选功能的代码实现,还是很容易实现的,大家也可以自己尝试一下,同时若文章有表述问题或着有该功能更好的实现方式,欢迎讨论。

 

  一个正努力迈向前端行业的大三狗,记住要不断学习!

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:ES6常用知识点小结

下一篇:Javascript继承,再谈