Zurb Foundation Switch 控制如何工作答案

【问题标题】：How does Zurb Foundation Switch control workZurb Foundation Switch 控制如何工作
【发布时间】：2013-04-25 13:42:39
【问题描述】：

我最近开始在一个 Asp MVC 网站上使用 Zurb Foundation 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 没有任何变化。我认为“checked”属性会出现在第二个输入上，但事实并非如此。

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

当我发布表单时，“switch-x”变量包含值“on”，无论开关在什么位置。

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

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

我肯定错过了什么……有什么想法吗？

【问题讨论】：

标签： zurb-foundation

【解决方案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>

【讨论】：

【解决方案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

【讨论】：

如果您点击文档的链接，这里有一个工作示例。您将看到单击开关时未修改选中的属性。所以如果我使用你的方法，即使开关改变了位置，我也会得到相同的值。
你试过了吗？它有效，see it in action here。
好吧，现在我只是觉得自己很愚蠢。我没有看到在 html 中更改了已检查的属性（使用 firebug），所以我认为没有发生任何事情。干杯
啊，如果你给单选按钮值！呵呵。