Twitter Bootstrap:获取引导复选框按钮的状态

Question

如何获得在引导程序中按下的按钮的"状态"？

即我正在使用此代码,这使按钮"切换"像一个复选框:

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

这是来自这里的bootstrap手册.

但是我然后单击了一个提交按钮 - $ _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仅选择这些按钮.由于buttons为表单元素,也可以有name和value属性,它可能是最好尽量使用那些.

例:

var data = {};

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

要将数据发送到服务器,您可以使用Ajax并手动设置数据/将其与其他表单数据(如果存在)合并.

如果要使用"传统"表单提交,也可以尝试在提交时将值镜像到隐藏的表单元素(请参阅按下提交按钮后更改表单值).