Twitter Bootstrap: Status der Bootstrap Checkbox Tasten

Question

Wie bekomme ich den "Zustand" der Tasten, die im Bootstrap gedrückt wurden?

I.e. Ich bin mit diesem Code, die Tasten ‚Toggle‘ wie ein Checkbox macht:

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

Welche von the bootstrap manual here. ist

Aber die ich dann ein Absenden-Button klicken - es gibt keine in dem $ _POST enthaltenen Daten. Woher weiß ich, welche Taste (n) ausgewählt wurde?

Ich habe versucht, 'value="1" name="1"' etc aswell zu den Tasten hinzufügen - aber immer noch nichts.

Bearbeiten: Hier ist die vollständige Lösung, die ich mit Hilfe von Felix unten erstellen konnte.

<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

Tasten, die „ausgewählt“ werden müssen die active Klasse mit ihnen verbunden. Sie können dann jQuery verwenden, um nur diese Schaltflächen auszuwählen. Da button s Formularelemente sind, können sie name und value Attribute haben, und es ist wahrscheinlich am besten, diese zu nutzen.

Beispiel:

var data = {}; 

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

Um die Daten an den Server zu senden, würden Sie können Ajax verwenden und die Daten manuell eingestellt/fusioniert mit anderen Formulardaten (falls vorhanden).

Sie könnten auch versuchen, die Werte beim Senden in versteckte Formularelemente zu spiegeln, wenn Sie die "traditionelle" Formularübergabe verwenden möchten (siehe Change form values after submit button pressed).

Answer 2

können Sie den Status der Bootstack-Switch-Methode verwenden, um auch den aktuellen Status zu erhalten.

var data = {}; 

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