这是在 Bootstrap 中将单选按钮设置为“选中”的正确方法吗？答案

【问题标题】：Is this the right way to set the radio button to “checked” in Bootstrap?这是在 Bootstrap 中将单选按钮设置为“选中”的正确方法吗？
【发布时间】：2016-05-19 17:05:06
【问题描述】：

我正在重新利用 TIMEX 被标记为重复的问题，因为我相信它不是重复的并且我遇到了同样的问题。

How do I set the radio button to "checked" in Bootstrap?

我使用 Bootstrap 按钮作为单选按钮。 http://getbootstrap.com/javascript/#buttons

这是我当前的代码：
<div  class="btn-group col-md-2" data-toggle="buttons">
    <label class="btn btn-gender btn-default active">
        <input type="radio" id="gender" name="gender" value="female"> Girls
    </label>
    <label class="btn btn-gender btn-default">
        <input type="radio" id="gender" name="gender" value="male"> Guys
    </label> 
</div> 
如何使用 JavaScript 将“男性”设置为选中？

这是我对问题的重现： https://jsfiddle.net/JonathanN/ba7d24k3/

我在 getbootstrap.com 文档中或在 stackoverflow 上都找不到解决方案，所以这就是我想出的： https://jsfiddle.net/JonathanN/ba7d24k3/2/

var toggleRadioButton = function ($parent, name, value) {
  var $allButtons = $parent.find('input[name="' + name + '"]');
  $allButtons.prop('checked', false);
  $allButtons.parents('label.btn').removeClass('active');
  var $targetButton = $parent.find('input[name="' + name + '"][value="' + value + '"]');
  $targetButton.prop('checked', true);
  $targetButton.parents('label.btn').addClass('active');
};

我使用了 jQuery，但它也可以用更详细的 javascript 进行编码。希望我已经确定这不是基本的如何设置带有 javascript 问题的单选按钮的副本。

我的问题：有没有更简单的方法？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

想出了一个引导方法来做到这一点。

$('#genderM').parents('.btn').button('toggle');

https://jsfiddle.net/JonathanN/ba7d24k3/5/

【讨论】：

【解决方案2】：

如果你做类似的事情会怎样

$parent.find('input[name="' + name + '"][value="' + value + '"]').click();

为您想要选择的任何单选选项触发点击事件？这样引导程序就可以处理所有的 CSS 类更改等。

【讨论】：

似乎工作。如果没有更好的结果，我会接受... :) jsfiddle.net/JonathanN/ba7d24k3/4
至少，它是更灵活的代码。如果他们更新引导程序，它很可能不会中断。