1个复选框案例破解js全(反)选与不选原理之道

本博文源于js基础，旨在探讨如何实现单选和复选按钮的全选、反选、全不选中。并能讲解其中实现的原理。内容过于精巧，可仔细体味，并能运用在生产实际中去。

实验效果

点击“全不选”

点击“反选”

这里的反选没有考虑，因为生产实际很少用单选做反选，更多的做复选框比如商品订单。下面开始尝试拆解其中原理。

实验步骤

本次实验大家放心，没有css代码，只需要写出js和html代码就行了。先分析html代码，两个单选按钮，三个复选框，四个按钮。show按钮负责显示你选的是啥，其他三个按钮大家都明白，所以html代码非常清楚都能看懂

html代码

<label>
	<input type="radio" name="gender" value="男" checked="checked"/>男
</label>
<label>
	<input type="radio" name="gender" value="女" />女
</label>
<br />
<label>
	<input type="checkbox" name="hobby" value="足球" />足球
</label>
<label>
	<input type="checkbox" name="hobby" value="篮球" />篮球
</label>
<label>
	<input type="checkbox" name="hobby" value="羽毛球" checked="checked"/>羽毛球
</label>
<br/>
<input type="button" value="show" onclick="show()"/>
<input type="button" value="全选" onclick="changeBoxes(1);"/>
<input type="button" value="全不选" onclick="changeBoxes(0);"/>
<input type="button" value="反选" onclick="changeBoxes(-1);"/>
<div id="info"></div>

书写js代码

大家想啊js是最关键，一个破静态看着有啥用。那就要分析原生态js如何写show

• 获得句柄
• 对单选按钮进行遍历，只是两种结果，所以非常轻松
• 对复选按钮进行遍历，根据checked值就行，所以也能实现
• 最后打印输出

show函数我们就这样愉快的收工了。然后剩余三个按钮，大家会看到传来的一个1，0，-1.大家可以把1看作是true的存在，如果全选那就把这个1赋值给check值，那就实现全选。-1呢，直接那就取反一个“！”即可完成。全不选0赋值给check，那就是全不选。 相信大家看到这里应该能体会到精华了，亮点就在这里：

<script>
	function show() {
		var oRadio = document.getElementsByName("gender");
		var s = "我是";
		var info = document.getElementById("info");
		if(oRadio[0].checked)
			s+= oRadio[0].value;
		else 
			s+= oRadio[1].value;
		s += "生，喜欢";
		var oCheckBox = document.getElementsByName("hobby");
		for(var i=0;i<oCheckBox.length;i++) 
			if(oCheckBox[i].checked)
				s += oCheckBox[i].value + ",";
		info.innerHTML = s;
	}
	function changeBoxes(action) {
		var oCheckBox = document.getElementsByName("hobby");
		for(var i=0;i<oCheckBox.length;i++) 
			if(action<0)
				oCheckBox[i].checked = !oCheckBox[i].checked;
			else 
				oCheckBox[i].checked = action;
	}
</script>

总结

本次实验合理得当的讲解复选框按钮如何实现全选与不选和反选的效果，这也是用逻辑判断实现的。大家看到js代码，应该都能体会出来，俗话说：技法之妙，存乎一心。希望大家用它！掌握它！