2013-04-25 3 views
5

Недавно я начал использовать Zurb Foundation 4 для веб-сайта Asp MVC, и я не совсем понимаю, как должно работать управление коммутатором. Документы не говорят много http://foundation.zurb.com/docs/components/switch.htmlКак работает управление коммутатором Zurb Foundation

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

Я использую этот пример код, когда я нажимаю на переключателе, нет никаких изменений в HTML. Я решил, что атрибут «checked» будет идти на втором входе, но это не тот случай.

  • Как определить, какой переключатель был нажат?

Когда я POST форму, то «переключатель-х» переменная содержит значение «на» независимо от того, в каком положении переключатель находится в.

Я попытался добавить событие OnClick на этикетке, но это не получая увольнения, поскольку что-то похоже на перекрытие метки.

Я использую javascript, у меня нет никаких ошибок на странице.

Мне определенно чего-то не хватает ... Любые идеи?

ответ

3

Как определить, какой переключатель был нажат?

У вас есть id для каждого из входов радио, так что вы можете использовать их:

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

Это даст вам либо x или x1. Теперь это зависит от того, как вы будете его использовать. Но если вы будете передать его как логическое значение, которое я думаю, что вы, то вы можете просто сделать:

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

или просто

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

See it in action here

+1

Если вы по ссылке к документации, есть рабочий пример. Вы увидите, что проверенный атрибут не изменяется при щелчке переключателя. Поэтому, если я использую ваш метод, я всегда получаю то же значение, даже если переключатель изменил положение. – ThunderDev

+0

Вы пробовали? Он работает, [см. Это в действии здесь] (http://jsfiddle.net/KYPh5/). –

+0

Итак, теперь я просто чувствую себя глупо. Я не видел, чтобы измененный атрибут был изменен в html (используя firebug), поэтому я не предполагал, что ничего не происходит. Cheers – ThunderDev

5

Когда I POST форма, переменная «switch-x» содержит значение «on» независимо от того, в каком положении находится переключатель.

Вам нужно добавить значение в ваших полях ввода, чтобы иметь значение $ _POST [ «переключения-х»], как:

<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> 
Смежные вопросы