如何在Chrome中以编程方式切换Zurb Foundation Switch Control？

Question

我想使用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没有正确地拾取元素作为被检查和显示balk - 查看下图中的最后一个开关如何正确显示关闭状态。

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

Answer 1

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

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

您将遇到的问题是元素的ID会发生变化，因此稍微有点棘手，您可以使用更智能的选择器来获取元素。 元素状态发生变化后，您会注意到ID已更改为：

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

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

干杯奥利弗。

Answer 2

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

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

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