twitterブートストラップラジオボタンの値を取得します。 JQuery

Question

私は、Twitterのブートストラップからラジオボタンを使用しています：http://twitter.github.com/bootstrap/javascript.html#buttons。このようなルックスで私のHTMLで

：

私は、ユーザーがjQueryのか、JavaScriptに感謝をチェックし、ボタンの値を取得する方法を知っていただきたいと思い

<div class="btn-group" data-toggle="buttons-checkbox"> 
    <button type="button" class="btn">Left</button> 
    <button type="button" class="btn">Middle</button> 
    <button type="button" class="btn">Right</button> 
    </div> 
    <input type="submit" onclick="get_the_value_and_do_something_with_it" 

。

このトピックでいくつかの質問がありましたが、「チェックされた」属性を受け入れていないように見えるため、この種類のボタンとは異なると思います。

すべてのヘルプは大歓迎

PS次のようになります。誰かが、デフォルトでは、ボタンのいずれかを確認する方法を知っている場合、それはまた私をたくさん役立つだろう。ありがとうございました。

Answer 1

タグは、それがbuttonだと言うと、そのために、あなたはそれを示唆して何をすべき、とそれらのボタンで動作する...ここに簡単な例です：

<input type="hidden" id="alignment" value="" /> 
<div class="btn-group alignment" data-toggle="buttons-checkbox"> 
    <button type="button" class="btn">Left</button> 
    <button type="button" class="btn">Middle</button> 
    <button type="button" class="btn">Right</button> 
</div> 

は今のjQuery：

$(".alignment .btn").click(function() { 
    // whenever a button is clicked, set the hidden helper 
    $("#alignment").val($(this).text()); 
}); 

送信すると、alignmentの非表示フィールドに値が表示されます。ここで

は、基本的な例です：http://jsbin.com/oveniw/1/

---

注意を奪う事がクリックすると、要素の変更とブートストラップがクリックされたボタンにactiveクラス名を追加することです。

いつでもこれを使用してhidden fieldを変更することはできますが、自分でフォームを送信したい場合は、引き続き例を実行します。

Answer 2

次のように選択した取得することができます。

$('.btn-group button.btn:eq(0)').addClass('active') 

Answer 3

：あなたはアクティブな最初のボタンを設定したい場合は

$('.btn-group button.btn.active') 

は、例えば

$(selector).addClass('active') 

、アクティブなボタンを設定するには

ボタンを「アクティブ」に設定してボタンを「確認」することができます：

<div class="btn-group" data-toggle="buttons-checkbox" id="my_radiogroup"> 
    <button type="button" class="btn" data-value="0">Left</button> 
    <button type="button" class="btn active" data-value="1">Middle</button> 
    <button type="button" class="btn" data-value="2">Right</button> 
</div> 

この方法で、あなたが経由して値を取得可能性があります：

$("#my_radiogroup .active").data("value"); 
>>> 1 
(but may, of course, be undefined if no button is checked) 

をしかし心に留めておく

<div class="btn-group" data-toggle="buttons-checkbox"> 
    <button type="button" class="btn">Left</button> 
    <button type="button" class="btn active">Middle</button> 
    <button type="button" class="btn">Right</button> 
</div> 

が値を取得するには、次のような「値」のデータを、持っている必要があります選択したデータを実際に保存する場合は、 <input type=hidden>を使用していない限り、値はフォームに転記されません。

Answer 4

これを複雑にする理由はありません。

はあなたの選択したボタンを収集するための機能か何かを実行すると、そのように...何かがアクティブか非アクティブであるかどうかを選択するための...

<div class="btn-group" data-toggle="buttons-radio"> 
    <button type="button" class="productStatus btn btn-success" value="1">Yes</button> 
    <button type="button" class="productStatus btn btn-danger" value="0">No</button> 
</div> 

、あなたが実行します、あなたはボタンのグループを持っていると言いますこのコマンドは、選択したラジオボタンの値を取得します。あなたがボタンをクリックするか、それ以上のポイントをクリックすると、それが「チェックされている」とき、以前の回答のような「アクティブ」のクラスが与えられます。それはあなたが本当に必要とするものです。下の小さなスニペットで。

var active = $('.productStatus[class*="active"]').val(); 
alert(active); 

基本的には、この「productStatus」ボタンクラスを探して、ワイルドカードセレクタを使っている、とし、「アクティブ」クラスを持っているボタンの値を返します。

Answer 5

私はこのフックを使用するときにブートストラップのラジオボタンの数

$('div[data-toggle="buttons-radio"] .btn').click(function(){ 
    $('input[name="' + $(this).parent().attr('id') + '"]').val($(this).val()); 
}); 

そして、HTML内に複数の：あなたがして、フォームの提出にラジオボタンの値を確認することができます

<div class="btn-group" id="rental" data-toggle="buttons-radio"> 
    <button type="button" class="btn" value="0">Sale</button> 
    <button type="button" class="btn" value="1">Rent</button> 
</div> 

<input type="hidden" name="rental" value="0"> 

Answer 6

機能または送信ボタンのクリックイベント

alert($('.btn-group > .btn.active').attr("value"));