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

本文介绍了Bootstrap:设置在 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 版本:


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

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 class="btn btn-info">
    <input type="radio" name="options" id="match-four">Four numbers

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:


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

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

登录 关闭
发送“验证码”获取 | 15天全站免登陆