Twitter Bootstrap：ブートストラップのチェックボックスボタンの状態を取得

Question

ブートストラップで押されたボタンの「状態」を取得するにはどうすればよいですか？

I.e.私は、チェックボックスのようなボタンのトグル」を行い、このコードは、使用しています：

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

the bootstrap manual here.

しかし、そこから、私はその後、送信ボタンをクリックしている - $ _POSTに含まれているデータはありません。どのボタンが選択されているかをどのように知ることができますか？

ボタンには'value="1" name="1"'なども追加しようとしましたが、それでも何も表示されません。

編集：下記のFelixのヘルプを使用して作成できたフルソリューションがここにあります。 「選択」されている

<form method="post" action="" id="mform" class="form-horizontal"> 
<div class="btn-group" data-toggle="buttons-checkbox"> 
    <button type="button" name="left" value="1" class="btn btn-primary">Left</button> 
    <button type="button" name="middle" value="1" class="btn btn-primary">Middle</button> 
    <button type="button" name="right" value="1" class="btn btn-primary">Right</button> 
</div> 
<button type="submit" class="btn">Submit</button> 
</form> 

<script> 
    $('#mform').submit(function() { 
     $('#mform .btn.active').each(function() { 
      var input = document.createElement("input"); 
      input.setAttribute("type", "hidden"); 
      input.setAttribute("name", this.name); 
      input.setAttribute("value", this.value); 
      document.getElementById("mform").appendChild(input); 
     }); 
    }); 
</script> 

Answer 1

ボタンは、それらに接続activeクラスを持つことになります。 jQueryを使用すると、これらのボタンだけを選択できます。 buttonはフォーム要素なので、それらはnameとvalueの属性を持つことができ、おそらくそれを利用するのが最適です。

例：

var data = {}; 

$('#myButtonGroup .btn.active').each(function() { 
    data[this.name] = this.value; 
}); 

がサーバにデータを送信するには、（存在する場合）他のフォームデータとマージ/アヤックスを使用してデータを手動で設定することができますでしょう。

"従来の"フォーム送信（Change form values after submit button pressedを参照）を使用する場合は、送信時に値を隠しフォーム要素にミラーリングすることもできます。

Answer 2

あなたは現在の状態を取得するためにブートストラップスイッチ方式の状態を使用することができます。

var data = {}; 

$('#myButtonGroup .btn.active').each(function(index,element) { 
    data[this.name] = jQuery(element).bootstrapSwitch('state') 
});