Jak działa sterowanie przełącznikiem Zurb Foundation

Question

Niedawno zacząłem używać Zurb Foundation 4 dla strony internetowej Asp MVC i nie bardzo rozumiem, jak powinna działać kontrola przełącznika. Docs nie mówią dużo 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> 

Używam tego kodu przykład po kliknięciu na przełączniku, nie ma żadnych zmian w kodzie HTML. Doszedłem do wniosku, że atrybut "sprawdzony" pojawi się na drugim wejściu, ale tak nie jest.

• Jak mogę wykryć, który przycisk został kliknięty?

Kiedy POST formularz, tym „switch-x” zmienna zawiera wartość „on” bez względu na położenie przełącznika jest.

Próbowałem, dodając zdarzenie onclick na etykiecie, ale to nie zostać zwolnionym, ponieważ coś wydaje się zachodzić na etykietę.

Używam javascript fundacji, nie mam żadnych błędów na stronie.

Zdecydowanie brakuje czegoś ... Jakieś pomysły?

Answer 1

Jak mogę wykryć, który przycisk został kliknięty?

Masz id dla każdego z wejść radiowych, dzięki czemu można z nich korzystać:

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

To daje albo x lub x1. Teraz zależy od tego, jak go wykorzystasz. Ale jeśli będzie przepuszczenie go jako wartość logiczną, która myślę, że będzie, to może po prostu zrobić:

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

lub po prostu

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

See it in action here

Answer 2

Kiedy I POST formularz, zmienna "switch-x" zawiera wartość "on" bez względu na pozycję przełącznika.

Trzeba dodać wartość w polach wejściowych mieć [ „switch-X”] wartość $ _POST, jak:

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