Twitter引導程序單選按鈕不起作用

Question

我得到了twitter引導javascript單選按鈕的問題。當我選擇一個然後點擊提交按鈕時，它不會顯示選定的無線電值。

我的代碼：

<form action="" class="form-horizontal" method="post"> 
    <fieldset> 
    <div class="control-group"> 
     <label class="control-label">Type:</label> 
     <div class="controls"> 
     <div class="btn-group" data-toggle="buttons-radio"> 
      <button type="button" data-toggle="button" name="option" value="1" class="btn btn-primary">Option One</button> 
      <button type="button" data-toggle="button" name="option" value="2" class="btn btn-primary">Option Two</button> 
     </div> 
     </div> 
    </div> 
    <div class="form-actions"> 
     <input class="btn btn-primary" type="submit" value="Go"> 
     <a href="index.php" class="btn">Back</a> 
    </div> 
    </fieldset> 
</form> 

正如你可以看到，有一個name="option" value="1"和name="option" value="2"但是當我選擇一個電臺，我做的：

<?php print_r($_POST); ?>

沒有指定option後。

它只發生在twitter單選按鈕上，因爲當我添加<input type="text" name="test" value="something"/>時，它會出現在$_POST變量中。

問題在哪裏？

Answer 1

問題是<button>單擊時不提交任何內容。點擊該按鈕

<input type="hidden" name="option" value="" id="btn-input" /> 
<div class="btn-group" data-toggle="buttons-radio"> 
    <button id="btn-one" type="button" data-toggle="button" name="option" value="1" class="btn btn-primary">Option One</button> 
    <button id="btn-two" type="button" data-toggle="button" name="option" value="2" class="btn btn-primary">Option Two</button> 
</div> 

<script> 
    var btns = ['btn-one', 'btn-two']; 
    var input = document.getElementById('btn-input'); 
    for(var i = 0; i < btns.length; i++) { 
    document.getElementById(btns[i]).addEventListener('click', function() { 
     input.value = this.value; 
    }); 
    } 
</script> 

時在引導的情況下，「無線」隻影響該按鈕狀態&行爲，您將需要有一個隱藏的輸入字段，並輸入內觸發值的變化。它不影響表單行爲。

Answer 2

這是一個jQuery替代上面的作品。

$("body").find(".btn").each(function(){ 
    $(this).bind('click', function(){ 
     $("input[name=view-opt-bt-group-value]").value = this.value 
    }); 
    }); 

的HTML來是這樣的：

我想出了

<div class="row pull-right"> 
    <div class="btn-group view-opt-btn-group" data-toggle="buttons-radio"> 
    <button type="button" class="btn" value="0"><i class="icon-th-list"></i></button> 
    <button type="button" class="btn" value="1"><i class="icon-th-list"></i></button> 
    <input type="hidden" name="view-opt-bt-group-value" value="0"> 
    </div> 
</div> 

Answer 3

最簡單的jQuery代碼是：

<div class="btn-group" data-toggle="buttons-radio"> 
    <button type="button" class="btn" onClick="$('#gender').val('f');">♀</button> 
    <button type="button" class="btn" onClick="$('#gender').val('m');">♂</button> 
</div> 
<input name="gender" id="gender" type="hidden" value=""> 

這是一個特殊的使用情況，對我來說，所以它沒不需要強大或靈活。

Answer 4

您可以將btn類添加到<label> s，因此我實現了以下不需要隱藏輸入的內容，如果沒有引導程序或JavaScript，並且仍然可以使用html助手，則會優雅地降級。

Try it out。

<div class="btn-group" data-toggle="buttons-radio"> 
    <label class="btn">@Html.RadioButton("option", 1) Option 1</label> 
    <label class="btn">@Html.RadioButton("option", 2) Option 2</label> 
</div> 
... 
<script type="text/javascript"> 
    $(function() { 
     // Bootstrappable btn-group with checkables inside 
     // - hide inputs and set bootstrap class 
     $('.btn-group label.btn input[type=radio]') 
      .hide() 
      .filter(':checked').parent('.btn').addClass('active'); 
    }); 
</script> 

更新：他們使用這種格式現在引導3，但它需要稍微不同的標記（即data-toggle="buttons"）。見http://getbootstrap.com/javascript/#buttons

Answer 5

我的回答是@mcNux

基於https://stackoverflow.com/a/16214643/1111662在您看來（我用HAML但是如果需要轉換爲ERB）

.btn-group{data:{toggle: "buttons-radio"}} 
    %label.btn 
    = f.radio_button :gender, "Male" 
    Male 
    %label.btn 
    = f.radio_button :gender, "Female" 
    Female 

您認爲特定的JavaScript例如pages.js.coffee（再次，我使用CoffeeScript，但如果需要轉換爲普通JS JQuery）

$(document).ready -> 
    $('.btn-group label.btn input[type=radio]') 
    .hide() 
    .filter(':checked').parent('.btn').addClass('active')