JavaScript操作checkbox复选框

系统管理员 2022-08-07 06:53 297阅读 0赞

JavaScript操作checkbox的方式和[操作radio][radio]的方式相似，都是利用元素项的checked属性来完成。先获取checkbox元素集合，遍历集合，对集合中的每一项做操作。

这里讲几个常用的checkbox复选框的常见示例。

# 取值 #

给定页面

<body>
    	<p>
    		<label for="hobby">Hobby:  
    			<input type="checkbox" name="hobby" value="reading" />阅读  
    			<input type="checkbox" name="hobby" value="climbing" />爬山  
    			<input type="checkbox" name="hobby" value="running" />跑步  
    			<input type="checkbox" name="hobby" value="fishing" />钓鱼  
    			<input type="checkbox" name="hobby" value="cooking" />做饭  
    			</br></br>
    			<input type="button" value="Get Value" οnclick="getValue()" />
    		</label>
    	</p>
    </body>

要获取多选框的值，该怎么处理呢？

跟获取radio单选按钮值的步骤相同。

1 获取复选框元素集合

2 遍历复选框元素

3 将选中的复选框的值拼接出来，返回

这里我们将复选框值拼接出来，之间用“，”分隔，返回的时候，如果没有选中，则返回空字符串，而非JavaScript的默认空值undefined。

# 全选 #

全选是复选框中常见的一个操作，选中所有的选项。

全选也是基于checked属性的操作，遍历所有的元素项，将每一个元素项的checked属性都置为true。

<body>
    	<p>
    		<label for="hobby">Hobby:  
    			<input type="button" name="selectAll" value="selectAll" οnclick="selectAll()" />全选  
    			<input type="button" name="selectOther" value="selectOther" οnclick="selectOther()" />反选
    			</br></br>
    			<input type="checkbox" name="hobby" value="reading" />阅读  
    			<input type="checkbox" name="hobby" value="climbing" />爬山  
    			<input type="checkbox" name="hobby" value="running" />跑步  
    			<input type="checkbox" name="hobby" value="fishing" />钓鱼  
    			<input type="checkbox" name="hobby" value="cooking" />做饭  
    			</br></br>
    			<input type="button" value="Get Value" οnclick="getValue()" />
    		</label>
    	</p>
    </body>

全选时，首先需要判断当前复选框是否处于全选的状态，然后再适时的全选，或全不选。

判断是否处于全选状态：true，全选；false，非全选

全选操作

# 反选 #

反选的操作即选中那些当前没有被选中的项，并将当前选中的项取消。

上面几个例子，都是本人今天没事写的玩的，里面可能有些操作不是很符合客户体验，如果您有更好的方案，可以提出来。但就通过上面的示例，应该能很好的理解checkbox了吧。

其实 **checkbox**和**radio**一样，都是基于**checked**属性，对它们的操作就是对checked属性的操作，技术checked属性就可以了。

[radio]: http://blog.csdn.net/magi1201/article/details/44465557