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

Question

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

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

I'm using Bootstrap buttons as a radio button. http://getbootstrap.com/javascript/#buttons

This is my current code:

<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> 

How can I set "male" to checked using 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 进行编码。希望我已经确定这不是基本的 how to set a radio button with javascript 问题的重复。

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

Answer 1

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

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

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