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

如果＃1工作，＃2情况下不起作用。检查代码波纹管：Bootstrap单选按钮“已检查”标志

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

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

来源

2013-09-30 Khrys

什么不行？ – Trevor

假设你需要有一个默认按钮选中。

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

的active类加入，这样会将它默认的形式提交你想拖欠和checked=""其input标签上的按钮（label标签）。

来源

2013-09-30 20:30:22 Trevor

谢谢@Trevor。该按钮现在被检查，但是当我提交表单时，它不理解为已检查。如果我手动点击没有“主动”的其他选项，提交可以理解该值。随着2013年的活跃，如果我点击2011年，例如，并在2013年再次点击并提交它的工作表格。你有什么理想吗？再次感谢。 – Khrys

看起来像这样：http://stackoverflow.com/questions/11462434/twitter-bootstrap-radio-buttons-not-working – Khrys

哦，在这种情况下，尝试添加'checked =“”'输入元素以及。我会更新我的答案。 – Trevor

一个JavaScript修复到“主动”类适用于下列的检查输入父母的所有标签：

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

插入右

后

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

来源

2014-02-09 20:28:46 rawrkats

如果您遇到点击“返回”后没有突出显示的按钮有问题，JavaScript的这段代码修复了这个问题。谢谢，@rawrkats。 –

我喜欢这个解决方案最好，但我用'$（“.btn-group”）。find（'：input：checked'）。parent（'.btn'）。addClass（'active'）;'这样它在没有任何这些页面的页面上运行速度更快。 –

使用活跃类标签使其自动选择并使用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>

来源

2015-07-07 06:26:28 Cyclotron3x3

你必须在标签中使用active来使其工作，如上所述。但你可以使用checked =“checked”，它也可以工作。这不是必要的，但它更清晰，更具有意义，因为它更符合html格式。

来源

2015-08-12 14:00:12 Gi1ber7

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

回答

相关问题