ブートストラップのボタングループをフォームへのラジオスタイル入力にするにはどうすればよいですか？

Question

ブートストラップを使用してラジオボタングループを作成する次のHTMLがあります。

<div class="btn-group" data-toggle="buttons-radio"> 
    <button class="btn" type="button" name="rating" value="1"> 
    <img ...> 
    </button> 
    <button class="btn" type="button" name="rating" value="2"> 
    <img ...> 
    </button> 
    <button class="btn" type="button" name="rating" value="3"> 
    <img ...> 
    </button> 
    <button class="btn" type="button" name="rating" value="4"> 
    <img ...> 
    </button> 
</div> 

<button class="btn" type="submit" name="submit">Submit</button> 

は、ユーザーの選択に基づいて、私は、選択されたボタンの値が何であれに割り当てられた値を持つ「評価」という名前のラジオ・グループからのフォームで変数を送信します。 jQueryでこれをどのように行うのですか？平易な英語で

Answer 1

$('button[name="rating"].active').val(); 

選択として読み込むこと：私評価（グループの値を持つname属性によって

button要素

フィルタの値を与える

• ）
• とCSSクラスactive（これが選択されたことを示します）
コメントにOPの新しい質問をもとに

編集：カスタムスクリプトハンドラを使用する必要がありますボタンからの入力をキャプチャするには

。 あなたの目標がフォームでこれを実際に提出することであれば、私は実際にそれを提案します。これは主に、ユーザーがフォームで期待しているものではないためです。通常のラジオボタン入力を使用するだけです。しかし

あなたは次の操作を行うことができ、これを使用したい場合：

$('form').submit(function() { 
    var rating = $('button[name="rating"].active').val(); 

    // get the rest of the values 
    // submit the form 
});​ 

はここbutton対定期inputとの例だと、なぜあなたは、フォームのボタンを使用しないでください。ここでhttp://jsfiddle.net/TxgVe/1/

Answer 2

は私のソリューションです：http://jsfiddle.net/tFYV9/1/

EDIT（jsFiddleからコード）

HTML

<input type="text" id="hidden_ipt" value="0" /> 
<div class="btn-group" data-toggle="buttons-radio" data-target="hidden_ipt"> 
    <button type="button" class="btn" data-toggle="button" value="female"> 
    female 
    </button> 
    <button type="button" class="btn" data-toggle="button" value="male"> 
    male 
    </button> 
</div>​ 

はJavaScript

// Bootstrap Hack 
var _old_toggle = $.fn.button.prototype.constructor.Constructor.prototype.toggle; 
$.fn.button.prototype.constructor.Constructor.prototype.toggle = function(){ 
    _old_toggle.apply(this); 
    var $parent = this.$element.parent('[data-toggle="buttons-radio"]') 
    var target = $parent ? $parent.data('target') : undefined; 
    var value = this.$element.attr('value'); 
    if(target && value){ 
    $('#'+target).val(value); 
    } 
} 

Answer 3

これを試してみてください。それは私のために働いた。私は巨大なフォームが複数回働いています。

<div class="btn-group" data-toggle="buttons-checkbox"> 
<button onclick="javascript:document.getElementById('INPUT_ID').value='1'" type="button" class="btn">CHECK ME</button> 
</div> 
<input type="hidden" id="INPUT_ID" name="INPUT_ID" value="" /> 

Answer 4

いいニュースです！

ブートストラップ3は、input type="radio"ボタングループを使用します。

アップグレードしたくない場合は、しかし、以下の私の答えを参照してください。あなたが必要なすべての作業には、このために

$('[data-toggle="buttons-radio"]').children(".btn").click(function(){ 
    var value = $(this).val(); 
    $(this).parent().next().val(value); 
    $(this).parent().next().valid(); // Remove this if you're not using jQuery Validation 
}); 

：私は次のjQueryを使用してい

---

をbtn-groupdivの後に、それぞれbuttonがvalueであり、input（私はtype="hidden"を使用することが好ましいが、type="text"がテストに適していることが好ましい）があることを保証する。

フォームを送信してから戻るボタンを押すと、非表示の入力を含め、すべてのフォームデータは引き続き表示されますが、ボタンはアクティブではないことに気付きました。それを解決するには、この余分なjQueryのを追加します。

$('[data-toggle="buttons-radio"]').each(function(){ 
    var that = $(this); 
    var value = that.next().val(); 
    if(value != "") { 
     that.children("button[value="+value+"]").addClass("active"); 
    } 
}); 

Answer 5

あなたはボタングループをブートストラップするために、皮膚のラジオやチェックボックスに自分のプラグインbootstrap-form-buttonsetを使用することができます。ブートストラップ2とブートストラップ3に対応しています。

普通の無線入力を書き、一緒にまとめて$('.my-wrapper').bsFormButtonset('attach')と呼んでください。 それはそうです。