引导单选按钮“检查”旗 [英] Bootstrap radio button "checked" flag

问题描述

＃1情况下，＃2情况下不起作用。检查下面的代码：

 < div class =container> 
< div class =row> 
< h1>无线电组＃1< / h1> 
< label class =radio-inline> 
< input name =radioGroupid =radio1value =option1type =radio> 1 
< / label> 
< label class =radio-inline> 
< input name =radioGroupid =radio2value =option2checked =checkedtype =radio> 2 
< / label> 
< label class =radio-inline> 
< input name =radioGroupid =radio3value =option3type =radio> 3 
< / label> 
< / div> 
< div class =row> 
< h1>无线电组＃2< / h1> 
< label for =yearclass =control-label input-group>年份< / label> 
< div class =btn-groupdata-toggle =buttons> 
< label class =btn btn-default> 
< input name =yearvalue =2011type =radio> 2011 
< / label> 
< label class =btn btn-default> 
< input name =yearvalue =2012type =radio> 2012 
< / label> 
< label class =btn btn-default> 
< input name =yearvalue =2013​​checked =checkedtype =radio> 2013 
< / label> 
< / div> 
< / div> 
< / div> 
  

你可以在这里看到它： http://bootply.com/84165

解决方案

假设您想要一个默认按钮被选中。 / p>

 < div class =row> 
< h1>无线电组＃2< / h1> 
< label for =yearclass =control-label input-group>年份< / label> 
< div class =btn-groupdata-toggle =buttons> 
< label class =btn btn-default> 
< input type =radioname =yearvalue =2011> 2011 
< / label> 
< label class =btn btn-default> 
< input type =radioname =yearvalue =2012> 2012 
< / label> 
< label class =btn btn-default active> 
< input type =radioname =yearvalue =2013​​checked => 2013 
< / label> 
< / div> 
< / div> 
  

将活动类添加到按钮（ 标签标签），并且 checked =到它的 input 标记，因此默认情况下会以表单的形式提交。

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

<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

解决方案

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 active class to the button (label tag) you want defaulted and checked="" to its input tag so it gets submitted in the form by default.

这篇关于引导单选按钮“检查”旗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！