如何获得在bootstrap中按下按钮的"状态"?
即。我正在使用此代码,它使按钮"切换"像一个复选框:
<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>
"选择"的按钮将附加active
类。然后,您可以使用jQuery选择这些按钮。由于 button
s是形式元素,因此它们可以具有name
和value
属性,并且最好使用这些属性。
示例:
var data = {};
$('#myButtonGroup .btn.active').each(function() {
data[this.name] = this.value;
});
要将数据发送到服务器,您可以使用AJAX并手动设置数据/将其与其他表单数据合并(如果存在)。
如果要使用"传统"表单提交(按下提交按钮后,请参见更改表单值)。