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中保存新值即可。