如何在 Bootstrap 中将单选按钮设置为“选中”？ [复制]

Posted 2023-03-05

【中文标题】如何在 Bootstrap 中将单选按钮设置为“选中”？ [复制]

【英文标题】：How do I set the radio button to "checked" in Bootstrap? [duplicate]

【发布时间】：2014-08-19 06:31:40

【问题描述】：

我使用 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 将“男性”设置为选中？

【问题讨论】：

我也有同样的问题，这是一个引导渲染问题。答案中的代码可能会设置收音机状态，但它们不会改变引导程序的视觉效果。我认为当前的答案没有达到目标，没有考虑到引导程序。这是一个演示问题的 jsfiddle：jsfiddle.net/JonathanN/ba7d24k3 我正在努力寻找答案，同时我会解决这个问题。

根据我的回答添加了一个新问题：***.com/questions/35296686/…

【参考方案1】：

由于male 是value 属性，使用：

document.querySelector("input[value='male']").checked = true;

document.querySelector

【参考方案2】：

换个id比较容易，对应每个性别，这样就可以应用js如下：

function check() 
    document.getElementById("gender-male").checked = true;

function uncheck() 
    document.getElementById("gender-male").checked = false;

或者，如果您想将其设置为默认选中，则可以使用 html 5 属性，如下所示：

<label class="btn btn-info">
    <input checked type="radio" id="match-three" name="options">Three numbers
</label>

看看这个问题：bootstrap-set-initial-radio-button-checked-in-html

【参考方案3】：

HTML：

<div  class="btn-group col-md-2" data-toggle="buttons">
                    <label class="btn btn-gender btn-default active">
                        <input type="radio" id="female" name="gender" value="female"> Girls
                    </label>
                    <label class="btn btn-gender btn-default">
                        <input type="radio" id="male" name="gender" value="male"> Guys
                    </label>
                </div>

Javascript：

function check() 
    document.getElementById("male").checked = true;