码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript操作checkbox复选框

时间:2015-03-20 23:49:03      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:javascript   checkbox   复选框   


    JavaScript操作checkbox的方式和操作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" 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了吧。


    其实 checkboxradio一样,都是基于checked属性,对它们的操作就是对checked属性的操作,技术checked属性就可以了。


JavaScript操作checkbox复选框

标签:javascript   checkbox   复选框   

原文地址:http://blog.csdn.net/magi1201/article/details/44499015

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!