使用jquery检查Bootstrap set单选按钮

Question

我的html代码中有单选按钮.我想通过jquery根据输入值更改状态

这是我的Html

<div class="col-md-2 col-xs-offset-1">
 <div class="radio">
  <label>
    <input type="radio" name="rdo_pkdrop" value="0" id="rdo_pick">
     Pick-up Time
   </label>
 </div>
 <div class="radio">
  <label>
   <input type="radio" name="rdo_pkdrop" id="rdo_drop" value="1">
    Drop Time
   </label>
 </div>
</div>

一个jQuery是

if(qs_trip_type == 0){
   $('#rdo_pick').prop('checked',true); 
}else{
   $('#rdo_pick').prop('checked',true); 
}

但是这也没有影响我也尝试过 $('#rdo_pick').prop('checked','checked');和

$('#rdo_pick').attr('checked','true'); 
  $('#rdo_pick').addClass('checked');

Answer 1

这是我能找到的唯一方式.虽然有点不优雅,但确实有效.

if(qs_trip_type == 0){
  $('#rdo_pick').click(); 
}else{
  $('#rdo_drop').click(); 
}

Answer 2

bootstrap 的问题是您通过将active类添加到输入的相应标签来设置选中的单选按钮。它看起来像这样：

<label class="btn btn-default active">    <!-- Note the class 'active' here -->
    <input type="radio" name="myRadio" value="value1" checked="checked"/>Value 1
</label>
<!-- ... -->

要使用 jQuery 检查单选按钮，您可以首先使用 jQuery Selector 选择输入字段，然后将该类添加到父类：

var $myRadioInput = $(...);
$myRadioInput.parent('.btn').addClass('active');

不要忘记active使用 jQuery删除以前选择的标签上的类，removeClass('active')以首先取消选择它们。

我也喜欢checked在输入本身上设置属性以使其具有正确的状态：

$myRadioInput.prop('checked', true);

请注意，该checked="checked"属性仅是加载页面时输入为选中输入的初始状态。它不会随 jQuery.prop()方法而改变，因为它是一个属性并且与实际的checked property. 这在jQuery Docs 中有很好的描述。

Answer 3

您的代码中有一个拼写错误替换ekse为else

   if(qs_trip_type == 0){
       $('#rdo_pick').prop('checked',true); 
    }else{
       $('#rdo_pick').prop('checked',true); 
    }