js复选框之全选&&反选&&不选

今日分享：纯js复选框之全选&&反选&&不选

想要了解其用法，首先先得了解它们各自的意思

全选：全部都选中

反选：选中的部分取消，没选中的部分勾选上

不选：全部取消勾选

了解大概意思后，需要了解复选框的一点就是，选中时，复选框的值为true；取消勾选时，复选框的值为false。再是checked属性的使用，根据这就可以解决是否可以选中了。

好了直接上代码。

---

js代码：

            //全选
            function allSelect(){
				var res  = document.getElementsByName("aihao");
				for(var i=0; i< res.length;i++){
					res[i].checked = true; 
				}
			}
            //反选
			function reSelect(){
				var res = document.getElementsByName("aihao");
				for(var i=0;i<res.length;i++){
					if(res[i].checked == true){
						res[i].checked = false;
					}else{
						res[i].checked = true;
					}
					
				}
			}
			//不选
			function notAllSelect(){
				var res  = document.getElementsByName("aihao");
				for(var i=0; i< res.length;i++){
					res[i].checked = false; 
				}
			}

html代码：

        <input type="checkbox" name="aihao" id="basketball" />篮球
		<input type="checkbox" name="aihao" id="soccer"  />足球
		<input type="checkbox" name="aihao" id="tennis" />网球
		<input type="checkbox" name="aihao" id="badminton"  />乒乓球
		<input type="checkbox" name="aihao" id="pingpong"  />羽毛球
		<input type="checkbox" name="aihao" id="volleyball"  />排球
		<br />
		<input type="button" name="" id="" value="全选" onclick="allSelect()"/>
		<input type="button" name="" id="" value="反选" onclick="reSelect()" />
		<input type="button" name="" id="" value="不选" onclick="notAllSelect()" />

---

总结一下，这其中js部分运用了循环遍历、函数、获取相应的元素集合等。主要需要了解复选框的是否选中时的值以及checked属性的用法。