5

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

つまり、私はこのコードを使用しています。これにより、ボタンがチェックボックスのように「トグル」されます。

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

これは、ここのブートストラップマニュアルからのものです。

しかし、次に送信ボタンをクリックします。$_POSTにはデータが含まれていません。どのボタンが選択されているかを知るにはどうすればよいですか？

'value="1" name="1"'ボタンにもetcを追加してみましたが、まだ何もありません。

編集：これが完全なソリューションであり、以下の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>
4

1 に答える 1

15

「選択」されたボタンには、activeクラスがアタッチされます。その後、jQueryを使用してこれらのボタンのみを選択できます。buttonsはフォーム要素であるため、属性を持つことができ、それらをname利用valueするのがおそらく最善です。

例：

var data = {};

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

データをサーバーに送信するには、Ajaxを使用してデータを手動で設定するか、他のフォームデータ（存在する場合）とマージします。

「従来の」フォーム送信を使用する場合は、送信時に値を非表示のフォーム要素にミラーリングすることもできます（送信ボタンを押した後にフォーム値を変更するを参照）。

于 2012-12-26T03:23:36.873 に答える