How does Zurb Foundation Switch control work

Question

I recently started using Zurb Foundation 4 for an Asp MVC website and I don't quite understand how the switch control is supposed to work. The docs don't say much 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>

I'm using this example code, when I click on the switch, there is no change in the html. I figured the "checked" attribute would go on the second input, but this is not the case.

How can I detect which radio button has been clicked ?

When I POST the form, the "switch-x" variable contains the value "on" no matter what position the switch is in.

I tried adding an onclick event on the label, but it's not getting fired as something seems to be overlapping the label.

I'm using foundation's javascript, I don't have any errors on the page.

I'm definitely missing something... Any ideas ?

von v. von v. · Accepted Answer · 2013-04-29T10:31:39

How can I detect which radio button has been clicked ?

You have an id for each of your radio inputs so you can use them:

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

That will give you either x or x1. Now it depends on how you will use it. But if you will be passing it as a boolean value, which I think you would, then you can simply do a:

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

or just simply

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

See it in action here

How does Zurb Foundation Switch control work

2 Answers