使用 jquery 检查引导设置单选按钮答案

【问题标题】：Bootstrap set radio button checked with jquery使用 jquery 检查引导设置单选按钮
【发布时间】：2015-03-22 04:28:15
【问题描述】：

我的 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');

【问题讨论】：

对不起，是拼写错误。其他的
以下答案均不适用于 boostrap css
跟bootstarap css没关系，你的js可能有问题

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

这是一个单行解决方案：

$('#rdo_pick').iCheck('check');

【讨论】：

【解决方案2】：

我试过了，这段代码可以用于引导收音机。

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

【讨论】：

【解决方案3】：

试试这个：设置收音机的值后，请添加此代码

$("input[type='checkbox'], input[type='radio']").iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal'
});

【讨论】：

【解决方案4】：

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 选择器选择输入字段，然后将类添加到父级：

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

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

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

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

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

【讨论】：

虽然这可能是这样做的方法。然而，我觉得有点奇怪，在如此广泛的 GUI 工具包中，为了获得基本功能，需要做一些笨拙的操作。

【解决方案5】：

这是我唯一能找到的方法。虽然有点不雅，但它确实有效。

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

【讨论】：

'不雅'，确实...... - 但是，它也对我有用！ :)

【解决方案6】：

试试这个

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

【讨论】：

【解决方案7】：

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

这是 jsfidlle http://jsfiddle.net/urLh9qnh/

【讨论】：

是的，亲爱的，它可以使用普通的 css。但不能使用 bootstrap
@VijayTambade 不明白。你能把它搞定吗？？

【解决方案8】：

您的代码中有错字，将ekse 替换为else

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

【讨论】：