如何在 Chrome 中以编程方式切换 Zurb Foundation 开关控制？答案

【问题标题】：How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?如何在 Chrome 中以编程方式切换 Zurb Foundation 开关控制？
【发布时间】：2013-03-25 13:59:57
【问题描述】：

我想使用 javascript 动态切换 Zurb Foundation Switch 控件的状态。

这是默认的 Zurb Fondation Switch：

<!-- Default switch --> 
<div class="switch">   
  <input id="d" name="switch-d" type="radio" checked>   
  <label for="d" onclick="">Off</label>

  <input id="d1" name="switch-d" type="radio">
  <label for="d1" onclick="">On</label>

  <span></span>
</div>

演示here。我相信它们基于this project。

当我尝试使用 jquery 更改开关的状态时：

$('#d1').attr('checked','checked'); $('#d').removeAttr('checked'); // Switch ON
$('#d').attr('checked','checked'); $('#d1').removeAttr('checked'); // Switch OFF

它在 Firefox 中有效，但在 Chrome 中无效。在 Chrome [OSX10.8.3 上的 v25] 中，第一个命令 - Switch ON - 是成功的，但是当我尝试使用 $('#d').attr('checked','checked'); $('#d1').removeAttr('checked'); 时，看起来 CSS 没有正确拾取正在检查的元素，并且显示停止 - 请参阅下图中的最后一个 Switch 未正确显示 OFF 状态。

您可以在 Zurb Foundation 文档的Switch page 上测试这些命令； d 指的是您在页面顶部列表中看到的第四个也是最大的开关。

【问题讨论】：

不能触发通常会修改控件状态的事件吗？
你知道那是什么吗？它没有记录，我在源代码中看不到它。但同意，这将是最好的方法。
您也可以在控制台中输入：$("#elem").click 以查看附加到事件的代码
嗯，这对我来说是一个耳光，因为我没有简化这样的事情。但是，它仍然不起作用 - 我只能打开，不能关闭。
好的，是的，刚刚看到。明白了 - 谢谢你让我明白了。树木的木材等等。

标签： javascript css zurb-foundation

【解决方案1】：

可以直接在元素上调用click函数。

$("#d1").click(); // Switch ON

您将遇到的问题是元素的 ID 发生了变化，因此会稍微复杂一些，您可以使用更智能的选择器来获取元素。一旦元素状态发生变化，您会注意到 ID 已更改为：

$("#d").click(); // Switch OFF

现在这会将您切换回关闭状态。

奥利弗干杯。

【讨论】：

【解决方案2】：

或者，如果您对模拟点击感到不舒服，您可以使用 jQuery 的 #prop 代替。

$('input:not([checked])').prop('checked', true);
$('input[checked]').prop('checked', false);

可能的用例：在点击时触发的 AJAX 调用的错误处理程序中。

【讨论】：

'input:checked' 作为选择器似乎效果更好。 input[checked] 只返回页面加载时检查的元素，而 input:checked 捕获页面加载后已切换的元素。
有趣 - 我不知道那个选择器。感谢您的评论！