bootstrapradio动态选中
最近⽤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];
// 性别动态赋值
bootstrap项目if("userGender"== name){
var radios = ElementsByName("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{
<('获取⽤户['+ userId +']信息失败，原因：'+ Message);
}
},
error :function(result){
<('获取⽤户['+ userId +']信息失败，原因：'+ Message);
}
});
效果图
第⼀条记录为⼥，则选中⼥
第⼆条男，则选中男
还有⼀个注意点：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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。