Geek asks and answers

How Zurb Foundation Switch Management Works

I recently started using Zurb Foundation 4 for the Asp MVC website, and I don’t quite understand how switch management should work. 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 use this code example, when I click on the switch, there are no changes in html. I realized that the "checked" attribute will go on the second input, but this is not the case.

  • How to determine which switch was pressed?

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

I tried adding the onclick event to the label, but it does not fire, because something seems to overlap the label.

javascript , .

- ... ?

+5
2

, ?

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');

+3

, "switch-x" "on" , .

, $_POST [ "switch-x" ], :

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

More articles:


All Articles