Come funziona il controllo dell'interruttore Zurb Foundation

Question

Recentemente ho iniziato a utilizzare Zurb Foundation 4 per un sito Web MVC Asp e non capisco perfettamente come funzioni il controllo dell'interruttore. I documenti non dicono molto http://foundation.zurb.com/docs/components/switch.html

<div class="switch"> 
    <input id="x" name="switch-x" type="radio" checked> 
    <label for="x" onclick="">Off</label> 

    <input id="x1" name="switch-x" type="radio"> 
    <label for="x1" onclick="">On</label> 

    <span></span> 
</div> 

Sto usando questo codice di esempio, quando si fa clic sull'interruttore, non c'è alcun cambiamento nel codice HTML. Ho pensato che l'attributo "checked" sarebbe andato sul secondo input, ma non è questo il caso.

• Come è possibile rilevare quale pulsante di opzione è stato selezionato?

quando posto il modulo, il "switch-x" variabile contiene il valore "a" non importa quale posizione l'interruttore è in.

Ho provato ad aggiungere un evento onclick sull'etichetta, ma è non viene licenziato perché qualcosa sembra sovrapporsi all'etichetta.

Sto usando javascript di Foundation, non ho errori nella pagina.

Mi manca assolutamente qualcosa ... Qualche idea?

Answer 1

Come è possibile rilevare quale pulsante di opzione è stato selezionato?

si dispone di un id per ciascuno dei vostri ingressi di radio in modo da poterli utilizzare:

$('input[name=switch-x]:checked').attr('id'); 

che vi darà sia x o x1. Ora dipende da come lo userai. Ma se si passerà come un valore booleano, che credo si sarebbe, allora si può semplicemente fare un:

var isOn = $('input[name=switch-x]:checked').attr('id') == 'x1'; 

o semplicemente

var isOn = $('#x1').is(':checked'); 

See it in action here

Answer 2

Quando I POST il modulo, la variabile "switch-x" contiene il valore "on" indipendentemente dalla posizione in cui si trova l'interruttore.

è necessario aggiungere un valore nei campi di input per avere il valore di $ _POST [ "switch-x"], come:

<div class="switch"> 
    <input id="x" name="switch-x" type="radio" value="0" checked> 
    <label for="x" onclick="">Off</label> 

    <input id="x1" name="switch-x" type="radio" value="1"> 
    <label for="x1" onclick="">On</label> 

    <span></span> 
</div>