Pulsante di avvio di Twitter Pulsante Controllo gruppo Pulsanti / caselle di controllo

Sto cercando di utilizzare il gruppo di pulsanti Bootstrap di Twitter come un insieme effettivo di controlli di input del modulo. Per impostazione predefinita, questi gruppi di pulsanti possono essere creati per funzionare come un pulsante di opzione o un gruppo di caselle di controllo, ma poiché utilizzano l’elemento

script:

 $(".btn-group button").click(function () { $("#buttonvalue").val($(this).text()); }); 

quindi ottieni buttonvalue lato server

Con Bootstrap 3.2 inserisci l’input nascosto nel mezzo del contenitore del tuo gruppo di pulsanti. Invece del contenuto del testo prendiamo il valore del campo dati-valore.

 

Ora inserisci un piccolo snippet di javascript nella parte onload del tuo modello.

 $('.checkit .btn').click(function() { $(this).parent().find('input').val($(this).data("value")); }); 

Quindi devi solo aggiungere .checkit al tuo gruppo di pulsanti e inserire un campo di input nascosto.

Con bootstrap 3.2 è ansible utilizzare i gruppi di pulsanti direttamente con gli ingressi radio o casella di controllo

 

Vedi qui: http://jsfiddle.net/DHoeschen/gmxr45hh/1/

È ansible utilizzare elementi del modulo nascosti e javascript per utilizzare lo stato del pulsante per triggersre gli stati degli elementi del modulo.

Soluzione solo CSS:

HTML:

 

SCSS / MENO:

  label.btn { margin-bottom: 0; padding: 0; overflow: hidden; span { display: block; padding: 10px 15px; } input[type=checkbox] { display: none; } input:checked + span { display: block; color: #fff; background-color: #285e8e; } } 

JSfiddle qui