Twitter Bootstrap: Nhận các nút kiểm tra trạng thái của bootstrap

Question

Làm cách nào để nhận được "trạng thái" các nút đã được nhấn trong bootstrap?

I.e. Tôi đang sử dụng mã này, mà làm cho nút 'chuyển đổi' giống như một hộp kiểm:

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

Đó là từ the bootstrap manual here.

Nhưng mà tôi sau đó bấm vào một nút gửi - không có dữ liệu chứa trong $ _POST. Làm cách nào để biết (các) nút nào đã được chọn?

Tôi đã thử thêm 'value="1" name="1"' v.v. vào các nút - nhưng vẫn không có gì.

Chỉnh sửa: Đây là giải pháp đầy đủ, mà tôi đã có thể tạo bằng cách sử dụng trợ giúp từ Felix bên dưới.

<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

Nút được chọn "" sẽ có lớp active được đính kèm với chúng. Sau đó bạn có thể sử dụng jQuery để chỉ chọn các nút đó. Vì button s là các phần tử biểu mẫu, chúng có thể có các thuộc tính name và value và tốt nhất nên sử dụng chúng.

Ví dụ:

var data = {}; 

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

Để gửi dữ liệu đến máy chủ, bạn có thể sử dụng Ajax và thiết lập dữ liệu bằng tay/sáp nhập nó với dữ liệu hình thức khác (nếu nó tồn tại).

Bạn cũng có thể thử sao chép các giá trị vào thành phần biểu mẫu ẩn khi gửi nếu bạn muốn sử dụng gửi biểu mẫu "truyền thống" (xem Change form values after submit button pressed).

Answer 2

bạn cũng có thể sử dụng trạng thái phương thức chuyển đổi bootstap để nhận trạng thái hiện tại.

var data = {}; 

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