Html Bootstrap 单选按钮“已检查”标志

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19102946/
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 13:59:08  来源:igfitidea点击:

Bootstrap radio button "checked" flag

htmltwitter-bootstrapradio-button

提问by Khrys

In case #1 works, in case #2 it do not works. Check the code bellow:

在#1 的情况下,在#2 的情况下它不起作用。检查下面的代码:

<div class="container">
    <div class="row">
        <h1>Radio Group #1</h1>
        <label class="radio-inline">
          <input name="radioGroup" id="radio1" value="option1" type="radio"> 1
        </label>
        <label class="radio-inline">
          <input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2
        </label>
        <label class="radio-inline">
          <input name="radioGroup" id="radio3" value="option3" type="radio"> 3
        </label>
    </div>
    <div class="row">
        <h1>Radio Group #2</h1>
        <label for="year" class="control-label input-group">Year</label>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input name="year" value="2011" type="radio">2011
            </label>
            <label class="btn btn-default">
                <input name="year" value="2012" type="radio">2012
            </label>
            <label class="btn btn-default">
                <input name="year" value="2013" checked="checked" type="radio">2013
            </label>
        </div>  
    </div>  
</div>

You can see it in action here: http://bootply.com/84165

你可以在这里看到它的实际效果:http: //bootply.com/84165

回答by Trevor

Assuming you want a default button checked.

假设您想要选中一个默认按钮。

<div class="row">
    <h1>Radio Group #2</h1>
    <label for="year" class="control-label input-group">Year</label>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default">
            <input type="radio" name="year" value="2011">2011
        </label>
        <label class="btn btn-default">
            <input type="radio" name="year" value="2012">2012
        </label>
        <label class="btn btn-default active">
            <input type="radio" name="year" value="2013" checked="">2013
        </label>
    </div>
  </div>

Add the activeclass to the button (labeltag) you want defaulted and checked=""to its inputtag so it gets submitted in the form by default.

将该active类添加到label您想要默认的按钮(标签)checked=""及其input标签,以便默认情况下在表单中提交。

回答by rawrkats

A javascript fix to apply the 'active' class to all labels that are parents of checked inputs:

将 'active' 类应用于作为已检查输入的父级的所有标签的 javascript 修复:

$(':input:checked').parent('.btn').addClass('active');

insert right after

紧随其后插入

$('.btn').button();

回答by Gi1ber7

You have to use active in the label to make it work as mentioned above. But you can use checked="checked" and it will work too. It's not necessary but it's more legible and makes more sense as it is more html format compliance.

您必须在标签中使用 active 才能使其按上述方式工作。但是您可以使用 checked="checked" 并且它也可以使用。这不是必需的,但它更清晰,更有意义,因为它更符合 html 格式。

回答by Cyclotron3x3

Use activeclass with labelto make it auto select and use checked="".

使用带标签的活动类使其自动选择和使用.checked=""

   <label class="btn btn-primary  active" value="regular"  style="width:47%">
   <input  type="radio" name="service" checked=""  > Regular </label>
   <label class="btn btn-primary " value="express" style="width:46%">
   <input type="radio" name="service"> Express </label>