H5 单选控件 radio入门

单选场景不少，h5自带提供的单选控件简约规范，使用起来还是挺方便的。

就以最基本的为例，性别选择：

<form class="sexClass">
<label class="single"><input type="radio" name="sex" value="male" />男</label>
<label class="single"><input type="radio" name="sex" value="female" />女</label>
<label class="single"><input type="radio" name="sex" value="secret" />保密</label>

</form>

form中的radio必须将name属性设置为相同，单选属性才会生效。

设置默认值，只需要按name拿到input集合，然后按排序对号入座把checked属性设置为true即可。

	var sexInput = document.getElementsByName("sex");
	if (userInfo.sex == "男") {
		sexInput[0].checked = true;
	}else if (userInfo.sex == "女") {
		sexInput[1].checked = true;


	}else{
		sexInput[2].checked = true;
	}

同理的，需要获取选择值的话，也可以通过拿到集合，遍历判断

 function getSex(){
    var radio = document.getElementsByName("sex");  
    for (i=0; i<radio.length; i++) {  
        if (radio[i].checked) {  
            return radio[i].value;
        }  
    } 
 }

取值还有其他方案，例如，给input设置onclick事件，在点击选中的时候就直接将js中的参数替换成最新值。

onclick="getSex(this.value)" 

this为当前对象，点击时自然是点击的input对象，点击的时候将值传入，在js中保存新值即可。