取消选中已选择的radio的js方法

需求:查找出被选中radio的值,并且能够取消选中的radio

基础知识:
关于radio:首先我们要了解的是,radio是单选按钮,当选中其中一个radio,则其他的radio变成非选状态,选中的radio的checked的值为true,非选的radio的checked值为false。
关于getElementBy/getElementsBy相关方法:细心点的人可以发现前者的Element是单数形式,后者是复数形式,我们可以简单的理解为单数只能返回一个值,而复数可以返回多个值。

1.getElementById():因为id是唯一的,所以通过id获取的元素只能是一个,该方法返回id的第一个值,在本例中getElementById(“brand”).value=1
2.getElementsByName:通过定义的name来获取相关元素,返回的值是数组形式,在本例中document.getElementsByName(“brand”).length的意思,就是将所有name=brand的元素统计起来,获取他们的长度。
3.getElementsByTagName:通过标签来获得元素,返回的值是数组形式,例如在本例中,document.getElementsByTagName(“input”).length=4,因为有4个input的标签。

完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>取消选中已选择的radio的js方法|APIEYE.com</title>
<script type="text/javascript">
function clearradio(){                           //取消radio的选择
	var x=document.getElementsByName("brand");  //获取所有name=brand的元素
	for(var i=0;i<x.length;i++){ //对所有结果进行遍历,如果状态是被选中的,则将其选择取消
		if (x[i].checked==true)
		{
			x[i].checked=false;
		}
	}
}
</script>
</head>
<body>
 
<input type="radio" name="brand" id="brand" value="1" /><br />
<input type="radio" name="brand" id="brand" value="2" /><br />
<input type="radio" name="brand" id="brand" value="3" /><br />
<br />
<input type="button" onclick="clearradio()" value="点击取消选择" />
<!--根据自己的需要,可以将button改成其他类型。-->
</body>
</html>

演示地址:https://www.apieye.com/plus/312.html

本文固定链接: https://www.apieye.com/312.html | APIEYE

该日志由 Jazzy 于2012年10月18日发表在 JavaScript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 取消选中已选择的radio的js方法 | APIEYE
关键字: , ,

取消选中已选择的radio的js方法:目前有4 条留言

  1. 地板
    zencart教程:

    正好找到了,拿去试一下

    2014-03-14 13:12
  2. 板凳
    R.T:

    这个例子是点击按钮情况,若是我要点击A,则选中A,再点击A,取消选中呢。。点击事件好像重复发生

    2013-07-05 11:32
  3. 沙发
    dysodeng:

    正好需要

    2013-06-05 18:09

发表评论

您必须 [ 登录 ] 才能发表留言!