Zurb Foundation Switch如何控制工作

Question

我最近开始使用Zurb Foundation 4作为Asp MVC网站,我不太明白开关控制应该如何工作.这些文档并没有多说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

当我发布表单时,无论交换机处于什么位置,"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>

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

在这里查看它的实际效果