Bootstrap:设置在 HTML 中选中的初始单选按钮 [英] Bootstrap: set initial radio button checked in HTML

问题描述

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

这是我的代码:

<label class="btn btn-info"><input checked="checked" type="radio" id="match-three" name="options">三个数字<label class="btn btn-info"><input type="radio" name="options" id="match-four">四个数字

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

单击事件后按钮的样式设置为 OK，所以我不确定初始加载时出了什么问题.

此处的 Bootply 版本:http://bootply.com/89566

解决方案

如果您使用的是 HTML 5 doctype，只需使用不带任何值的 checked :

<input checked type="radio" id="match-three" name="options">三个数字

checked="checked" 应该也能工作，所以你会必须澄清什么对您不起作用.

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

参考文档.

I'm using Bootstrap's JavaScript buttons to style some radio buttons, and I don't seem to be able to set an initial button as checked.

Here is my code:

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

The first button has checked="checked", but it isn't being styled as checked.

The buttons are being styled OK after click events, so I'm not sure what is going wrong on initial load.

Bootply version here: http://bootply.com/89566

解决方案

If you're using the HTML 5 doctype, just use checked without any value:

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

checked="checked" should work as well, so you'll have to clarify what's not working for you.

• Having a checked attribute on the input will ensure correct state on the form field
• Adding an active class on the label will set the correct visual state

Reference documentation.

这篇关于Bootstrap:设置在 HTML 中选中的初始单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！