Html Bootstrap 按钮单选组默认值(检查属性)不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18326230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 12:19:43  来源:igfitidea点击:

Bootstrap Button Radio Group Default Value (Check Attribute) Not Working

htmltwitter-bootstrap

提问by TechnoBlahble

After countless hours of research, I'm still dumbfounded on how to get the checked attribute working for button radio groups for Bootstrap. I'm trying to default "Excellent."

经过无数个小时的研究,我仍然对如何让选中的属性为 Bootstrap 的按钮单选组工作感到困惑。我正在尝试默认“优秀”。

Even though I know for sure radio inputs are checkedand not selected, I even tried selectedand nothing works.

尽管我确定无线电输入是checked,但selected我什至尝试过selected,但没有任何效果。

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="inputWalls" id="inputWalls" value="Excellent" checked>
    Excellent </label>
    <label class="btn btn-default">
        <input type="radio" name="inputWalls" id="inputWalls" value="Good">
    Good </label>
    <label class="btn btn-default">
        <input type="radio" name="inputWalls" id="inputWalls" value="Poor">
    Poor </label>
</div>

If clarification is needed, please let me know.

如果需要澄清,请告诉我。

回答by TechnoBlahble

In twitter bootstrap, you will indicate the default value using the 'active' class. So, for your example, if you are using Twitter Bootstrap, the following code will use Excellent as default checked.

在 twitter bootstrap 中,您将使用“active”类指示默认值。因此,对于您的示例,如果您使用 Twitter Bootstrap,以下代码将使用优秀作为默认检查。

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default **active**">
        <input type="radio" name="inputWalls" id="inputWalls" value="Excellent" checked>
    Excellent </label>
    <label class="btn btn-default">
        <input type="radio" name="inputWalls" id="inputWalls" value="Good">
    Good </label>
    <label class="btn btn-default">
        <input type="radio" name="inputWalls" id="inputWalls" value="Poor">
    Poor </label>
</div>

When you toggle over the buttons, you add/remove the class - 'active' from the label's class.

当您切换按钮时,您可以添加/删除标签类中的类 - 'active'。

For an example, check this out - http://getbootstrap.com/javascript/#buttons- Radio

例如,看看这个 - http://getbootstrap.com/javascript/#buttons- Radio

回答by Nathan Reese

Looks like the question and answer are using bootstrap 3.0. I had the same question but with bootstrap 2.3.

看起来问题和答案使用的是引导程序 3.0。我有同样的问题,但使用引导程序 2.3。

<div class="btn-group" data-toggle="buttons-radio">
    <button class="btn active"> Option 1</button>
    <button class="btn"> Option 2</button>
    <button class="btn"> Option 3</button>
</div>

回答by tangphillip

Two things:

两件事情:

  1. You should use different IDs for each of your <input>elements -- they're supposed to be unique!
  2. Your example works for me! Check it out at JSFiddle!
  1. 您应该为每个<input>元素使用不同的 ID——它们应该是唯一的!
  2. 你的例子对我有用!在JSFiddle 上查看!