JS实现全选功能
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>
在这个小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. 结束
以上就是全选功能的代码实现，还是很容易实现的，大家也可以自己尝试一下，同时若文章有表述问题或着有该功能更好的实现方式，欢迎讨论。
一个正努力迈向前端行业的大三狗，记住要不断学习！
