bootstrap radio动态选中

最近用bootstrap 3做项目,发现一个超级恶心的问题,信息修改时bootstrap的radio怎么都无法动态选中,网上找了很多方法都不行。最后通过以下方式解决了。

代码如下

html定义

<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-3">
	<label for="genderM" class="radio-inline">
		<input type="radio" name="userGender" id="genderM" value="M">男
	</label>
	<label for="genderF" class="radio-inline">
		<input type="radio" name="userGender" id="genderF" value="F">女
	</label>
	<label for="genderX" class="radio-inline">
		<input type="radio" name="userGender" id="genderX" value="X">保密
	</label>
</div>

JS动态选中

$.ajax({
	url : "/flashsale/user/" + uId,
	async : false,
	type : "GET",
	success : function(result) {
		if (result.success) {
			var userInfo = result.data[0];
			for (var name in userInfo) {
				var value = userInfo[name];
				
				// 性别动态赋值
				if ("userGender" == name) {
					var radios = document.getElementsByName("userGender");
					console.log(radios);
					if ("M" == value) {
						radios[0].checked = true;
					} else if("F" == value) {
						radios[1].checked = true;
					}  else {
						radios[2].checked = true;
					}
				} else {
		        	$("#userForm #" + name).val(value);
		        }
			}
		} else {
			toastr.error('获取用户['+ userId + ']信息失败，原因：' + result.errorMessage);
		}
	},
	error : function(result) {
		toastr.error('获取用户['+ userId + ']信息失败，原因：' + result.errorMessage);
	}
});

效果图

第一条记录为女，则选中女

第二条男，则选中男

还有一个注意点：bootstrap的radio由一层label包着，有时看似选中了，可是Form提交后却取不到值，这个其实是假的选中，选中的是label的样式按钮而不是radio的。所以radio要加id，然后label标签需要加for属性指向radio的id才能真正选中radio，如下

<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-3">
	<label for="genderM" class="radio-inline">
		<input type="radio" name="userGender" id="genderM" value="M">男
	</label>
	<label for="genderF" class="radio-inline">
		<input type="radio" name="userGender" id="genderF" value="F">女
	</label>
	<label for="genderX" class="radio-inline">
		<input type="radio" name="userGender" id="genderX" value="X">保密
	</label>
</div>