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單選按鈕「已檢查」標誌

回答

相關問題