JavaScript操作checkbox复选框

56 阅读 0 评论 37 点赞

我是靠谱客的博主靓丽服饰，最近开发中收集的这篇文章主要介绍JavaScript操作checkbox复选框，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

JavaScript操作checkbox的方式和操作radio的方式相似，都是利用元素项的checked属性来完成。先获取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" onclick="getValue()" />
		</label>
	</p>
</body>

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

1 获取复选框元素集合
2 遍历复选框元素
3 将选中的复选框的值拼接出来并返回

function getValue(){
	var hobbies = document.getElementsByName("hobby");
	var value;
	for (i=0; i<hobbies.length; i++){
		if (hobbies[i].checked){
			if (!value){
				value = hobbies[i].value;
			} else {
				value += "," + hobbies[i].value;
			}
		}
	}
	
	alert(value == undefined ? '' : value);
}

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

全选

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

<body>
	<p>
		<label for="hobby">Hobby:  
			<input type="button" name="selectAll" value="selectAll" onclick="selectAll()" />全选  
			<input type="button" name="selectOther" value="selectOther" onclick="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" onclick="getValue()" />
		</label>
	</p>
</body>

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

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

function isSelectAll(){
	var hobbies = document.getElementsByName("hobby");
	for (i=0; i<hobbies.length; i++){
		if (!hobbies[i].checked){
			return false;
		}
	}
	return true;
}

全选操作

function selectAll(){
	var hobbies = document.getElementsByName("hobby");
	if (isSelectAll()){
		for (i=0; i<hobbies.length; i++){
			hobbies[i].checked = false;
		}
	} else {
		for (i=0; i<hobbies.length; i++){
			hobbies[i].checked = true;
		}
	}
}

反选

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

function selectOther(){
	var hobbies = document.getElementsByName("hobby");
	for (i=0; i<hobbies.length; i++){
		if (hobbies[i].checked){
			hobbies[i].checked = false;
		} else {
			hobbies[i].checked = true;
		}
	}
}

checkbox和radio一样，都是基于checked属性，对它们的操作就是对checked属性的操作，记住checked属性就可以了。