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

See it in action here

Zurb Foundation Switch如何控制工作

2 个答案: