Twitterのブートストラップラジオボタンが動作しない

Question

Twitterのブートストラップのjavascriptラジオボタンに問題があります。 1つを選択して[送信]ボタンをクリックすると、選択した無線値は表示されません。

マイコード：

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

それは私のために、例外的なユースケースですので、それはdidnの堅牢で柔軟性が必要です。

Answer 4

クラスを<label>に追加することができます。隠された入力を必要とせず、ブートストラップやjavascriptがなくても正常に機能しなくなり、引き続きHTMLヘルパーを使用できます。

。

<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

私の答えは、例えば、あなたのビュー固有のJavaScriptで、あなたのビューで@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 

に基づいて参照してください。pages.js.coffee（再び、私はCoffeeScriptのを使用しますが、必要であれば、プレーンJS jQueryのに変換）

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