Bootstrap su Twitter: ottieni lo stato dei pulsanti casella di controllo bootstrap

Question

Come ottengo lo "stato" dei pulsanti che sono stati premuti nel bootstrap?

I.e. Sto usando questo codice, il che rende i pulsanti 'Toggle' come una casella di controllo:

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

che è dal the bootstrap manual here.

Ma che ho poi clic su un pulsante di invio - non ci sono dati contenuti nel $ _POST. Come faccio a sapere quale tasto (i) è stato selezionato?

Ho provato ad aggiungereecc. Ai pulsanti - ma ancora niente.

Modifica: Ecco la soluzione completa, che sono stato in grado di creare utilizzando l'aiuto di Felix di seguito.

<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

pulsanti che sono "selezionati" avranno la classe active ad essi connessi. È quindi possibile utilizzare jQuery per selezionare solo quei pulsanti. Dal button s sono elementi del modulo, possono avere gli attributi name e value ed è probabilmente meglio utilizzarli.

Esempio:

var data = {}; 

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

Per inviare i dati al server, che ci si potrebbe usare Ajax e impostare manualmente i dati/fondersi con altri dati del modulo (se esiste).

Si potrebbe anche provare a eseguire il mirroring dei valori in elementi di forma nascosti su submit se si desidera utilizzare l'invio di moduli "tradizionali" (vedere Change form values after submit button pressed).

Answer 2

è possibile utilizzare lo stato del metodo switchtap switch per ottenere anche lo stato corrente.

var data = {}; 

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