7

我想使用 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>

演示在这里。我相信他们是基于这个项目的。

当我尝试使用 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 没有正确地拾取正在检查的元素并且显示停止 - 看看最后一个下图中的开关未正确显示关闭状态。

在此处输入图像描述

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

4

2 回答 2

5

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

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

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

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

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

干杯奥利弗。

于 2013-03-25T14:28:34.873 回答
3

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

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

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

于 2013-07-08T16:16:04.233 回答