Zurb基金会开关控制如何工作

Question

最近，我开始在Asp网站上使用4，我不太明白开关控制应该如何工作。医生们说的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>

我使用此示例代码，当我单击开关时，html中没有任何更改。我认为“选中”属性将用于第二个输入，但事实并非如此。

• 如何检测哪个单选按钮已被单击？

当我发布表单时，" switch -x“变量包含"on”值，而不管开关位于哪个位置。

我尝试在标签上添加一个onclick事件，但是它没有被触发，因为有东西似乎在重叠标签。

我使用的是基金会的javascript，页面上没有任何错误。

我肯定遗漏了什么..。有什么想法吗？

Answer 1

如何检测哪个单选按钮已被单击？

每个无线电输入都有一个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');

在这里看到它的作用

Answer 2

当我发布表单时，" 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>