twitter-bootstrap - Bootstrap：设置在 HTML 中选中的初始单选按钮

Question

我正在使用 Bootstrap 的 JavaScript 按钮来设置一些单选按钮的样式，但我似乎无法将初始按钮设置为选中状态。

这是我的代码：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-info">
    <input checked="checked" type="radio" id="match-three" name="options">Three numbers
  </label>
  <label class="btn btn-info">
    <input type="radio" name="options" id="match-four">Four numbers
  </label>
</div>

第一个按钮有checked="checked"，但它没有被设置为选中的样式。

在单击事件之后，按钮的样式设置为 OK，因此我不确定初始加载时出了什么问题。

这里的 Bootply 版本：http: //bootply.com/89566

Answer 1

如果您使用的是 HTML 5 文档类型，则只需使用checked没有任何值：

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

checked="checked"应该也可以，所以你必须澄清什么不适合你。

• 有一个checked属性input将确保表单字段的正确状态
• 在 上添加一个active类label将设置正确的视觉状态

参考文档。

Answer 2

如果您希望 Bootstrapbutton()组件最初识别checked输入，则需要添加一些 jQuery，例如..

$('[checked="checked"]').parent().addClass("active");

这会将活动状态设置为组中的适当按钮/标签。

Answer 3

就像 Skelly 提到的，活动类是 Bootstrap 正在切换的，它不查看选中的属性。但是，您不必使用 Javascript...

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

会给你你想要的。