javascript 获取表单中radio选中值

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/magi1201/article/details/44465557


    radio是form表单中非常常用的一种表单元素,对于radio的操作中,都是利用radio的checked属性,都是对radio的checked属性做操作。获取radio的选中值时,遍历radio按钮项,找到被选中(checked)的状态的那个按钮,然后返回其值;给radio赋值时,找到对应的按钮项,将其checked属性置为true即可。


获取radio值


Method1 遍历radio集合


    假如我们给定页面

<body>
      <p>
            <label for="DoorCt">Doors:  
                   <input type="radio" name="DoorCt" value="twoDoor" checked=”true”onclick="getValue()">Two
                   <input type="radio" name="DoorCt" value="fourDoor" onclick="getValue()">Four
            </label>
      </p>
</body>

    要获取其中的选中的按钮值,该怎么取呢?

 

    1 按照name属性获取该radio的集合

    2 遍历集合中的每一项元素

    3 获取元素的checked属性,是否为true,为true,返回其value值

function getValue(){
    // method 1 
	var radio = document.getElementsByName("DoorCt");
	for (i=0; i<radio.length; i++) {
		if (radio[i].checked) {
			alert(radio[i].value)
		}
	}
}

    这里使用alert(radio[i].value)是为了直观的效果,可以使用return radio[i].value 来返回value值。


    细看一下getValue方法的实现。


    var document.getElementsByName("DoorCt");

    根据name属性,获取radio的集合,getElementsByName方法是document获取对象的三个方法之一,获取到的是集合。

 

    紧接着 for (i=0;i<radio.length; i++) { 对集合中的元素开始遍历

 

    if (radio[i].checked) { 遍历每一个元素时,检查一下元素的checked属性,是否为true,为true的,则是被选中的,将其值radio[i].value 值返回。



Method2 传递当前radio对象值


    如果单选按钮仅是根据其值做一些页面选择切换的话,还可以更方便一些。

    给每个单选项绑定一个onclick方法,给方法传值this。

<body>
	<p>
		<label for="DoorCt">Doors:  
			<input type="radio" name="DoorCt" value="twoDoor" onclick="getValue(this)">Two
			<input type="radio" name="DoorCt" value="fourDoor" onclick="getValue(this)">Four
		</label>
	</p>
</body>

    this代表的是当前对象,即当前的<input > 输入按钮

    传到方法中之后

function getValue(obj) {
    // method 2 
	var value = obj.value;
	alert(value);
}

      直接获取value属性就可以了。


    看到这里,可不可以直接给getValue方法传递选中的value值呢,当然可以,直接传递value值,一步到位。

<body>
	<p>
		<label for="DoorCt">Doors:  
			<input type="radio" name="DoorCt" value="twoDoor" onclick="getValue(this.value)">Two
			<input type="radio" name="DoorCt" value="fourDoor" onclick="getValue(this.value)">Four
		</label>
	</p>
</body>
<script>
function getValue(value){
    // method2_1
	alert(value);
}
</script>  

 

给radio赋值

   

    给radio按钮赋值跟取值差不多,都是利用radio的checked属性,将要赋值的按钮项的checked项置为true即可。


<body>
	<p>
		<label for="DoorCt">Doors:  
			<input type="radio" name="DoorCt" value="twoDoor" onclick="getValue(this)">Two
			<input type="radio" name="DoorCt" value="fourDoor" onclick="getValue(this)">Four
		</label>
	</p>
</body>
<script>
function getValue(obj){
    // method 2 
	var value = obj.value;
	alert(value);
}

window.onload = function(){
	var radio = document.getElementsByName("DoorCt");
	radio[0].checked = true;
}

        这里待页面加载完成后,执行window.onload事件,事件中选中单选按钮的第一项,将其checked值置为true,即默认选中了第一项。


没有更多推荐了,返回首页