11

Bootstrapを使用してラジオボタングループを作成する次の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>

ユーザーの選択に基づいて、「rating」という名前のラジオグループから、選択したボタンの値に割り当てられた値を使用して変数を送信します。jQueryでこれを行うにはどうすればよいですか？

4

5 に答える 5

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

平易な英語では、その選択は次のようになります。

  • の値を教えてください
  • button要素
  • 評価nameの値を持つ属性（グループ）でフィルタリングする
  • およびCSSクラスactive（選択されたことを示す）

コメントのOPの新しい質問に基づいて編集します。

ボタンからの入力をキャプチャするには、カスタムスクリプトハンドラーを使用する必要があります。あなたの目標が実際にこれをフォームで提出することであるならば、私は実際にそれに反対することを提案します。これは主に、ユーザーがフォームに期待しているものではないためです。通常のラジオボタン入力を使用するだけです。

ただし、これを使用する場合は、次のようにすることができます。

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

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

これは、通常の例と、フォームでボタンを使用しない理由の例です。httpinput : //jsfiddle.net/TxgVe/1/button

于 2012-04-23T06:23:56.603 に答える
3

Try this. It worked for me. I have a huge form worked multiple times.

<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="" />
于 2012-10-09T11:40:31.367 に答える
3

これが私の解決策です：http：//jsfiddle.net/tFYV9/1/

編集 （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);
  }
}
于 2012-09-20T08:23:49.307 に答える
3

朗報です！

Bootstrap 3はinput type="radio"ボタングループを使用するようになりました！

ただし、アップグレードしたくない場合は、以下の私の答えを参照してください。

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

$('[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
});

これが機能するために必要なのは、それぞれbuttonにがありvalue、の後inputに（私は使用するのが好きtype="hidden"ですtype="text"が、テストには適しています）があることを確認することだけですbtn-group div。

フォームを送信してから[戻る]ボタンを押すと、非表示の入力を含むすべてのフォームデータが引き続き表示されますが、ボタンはアクティブになりません。これを修正するには、次のjQueryを追加します。

$('[data-toggle="buttons-radio"]').each(function(){
    var that = $(this);
    var value = that.next().val();
    if(value != "") {
        that.children("button[value="+value+"]").addClass("active");
    }
});
于 2013-07-23T14:28:57.060 に答える
1

プラグインのbootstrap-form-b​​uttonsetを使用してラジオをスキンしたり、チェックボックスを使用してボタングループをブートストラップしたりできます。Bootstrap2およびBootstrap3と互換性があります。

普通の古いラジオ入力を書いて、それらを一緒にラップして、を呼び出すだけ$('.my-wrapper').bsFormButtonset('attach')です。それでおしまい。

于 2014-02-02T19:52:29.680 に答える