javascript 获取表单中radio选中值

╰+哭是因爲堅強的太久メ 2022-08-07 06:47 217阅读 0赞

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”οnclick="getValue()">Two
                       <input type="radio" name="DoorCt" value="fourDoor" οnclick="getValue()">Four
                </label>
          </p>
    </body>

要获取其中的选中的按钮值，该怎么取呢？

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

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

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

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

细看一下getValue方法的实现。

var document.getElementsByName("DoorCt");

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

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

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

## Method2 传递当前radio对象值 ##

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

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

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" οnclick="getValue(this.value)">Two
    			<input type="radio" name="DoorCt" value="fourDoor" οnclick="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" οnclick="getValue(this)">Two
    			<input type="radio" name="DoorCt" value="fourDoor" οnclick="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，即默认选中了第一项。

[document]: http://blog.csdn.net/magi1201/article/details/43974171