Twitter Bootstrap：获取引导复选框按钮的状态答案

【问题标题】：Twitter Bootstrap: Get state of bootstrap checkbox buttonsTwitter Bootstrap：获取引导复选框按钮的状态
【发布时间】：2012-12-11 17:16:12
【问题描述】：

如何获取在引导程序中按下的按钮的“状态”？

即我正在使用这段代码，它使按钮像复选框一样“切换”：

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

【问题讨论】：

标签： php button twitter-bootstrap

【解决方案1】：

“选中”的按钮将附加active 类。然后，您可以使用 jQuery 仅选择这些按钮。由于buttons 是表单元素，它们可以具有name 和value 属性，最好利用这些属性。

例子：

var data = {};

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

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

如果您想使用“传统”表单提交，您还可以尝试在提交时将值镜像到隐藏的表单元素中（请参阅Change form values after submit button pressed）。

【讨论】：