12

Twitter ブートストラップのラジオボタンを使用しています: http://twitter.github.com/bootstrap/javascript.html#buttons。

私のhtmlでは次のようになります：

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

JqueryまたはJavascriptのおかげで、ユーザーがチェックしたボタンの値を取得する方法を知りたいです。

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

どんな助けでも大歓迎です

PS: 誰かがボタンの 1 つをデフォルトでチェックする方法を知っていれば、それも大いに役立ちます。ありがとうございました。

4

6 に答える 6

25

タグが であると言っているので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、フォーム自体を送信したい場合は、引き続き例を実行します。

于 2012-11-12T17:50:37.213 に答える
10

クラスを「アクティブ」に設定することで、ボタンを「チェック」できます。

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

値を取得するには、次のような「値」データが必要です。

<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)

<input type=hidden>ただし、選択したデータを実際に保存する必要がない限り、値はフォームに投稿されないことに注意してください。

于 2012-11-12T17:51:28.463 に答える
5

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

何かがアクティブか非アクティブかを選択するためのボタングループがあるとします...そのように...

<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」ボタン クラスを検索し、「アクティブ」クラスを持つボタンの値を返します。

于 2013-03-05T05:05:50.397 に答える
2

このフックは、Bootstrap ラジオ ボタンが複数ある場合に使用します。

$('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">
于 2013-07-17T09:46:55.997 に答える
0

次のように選択したものを取得できます。

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

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

$(selector).addClass('active')

たとえば、最初のボタンをアクティブに設定する場合:

$('.btn-group button.btn:eq(0)').addClass('active')
于 2012-11-12T17:50:50.807 に答える