2

我对 jQuery 很陌生，所以如果我遗漏了一些明显的东西，我深表歉意，但是......我只想在用户单击复选框时隐藏我的表单的一部分。

所以，我写了这个小的 jQuery 脚本：

$("#belonging_entire_world").toggle(function() {
            $("#access_for_friends, #access_for_groups").fadeOut();
        }, function(){ 
            $("#access_for_friends, #access_for_groups").fadeIn();
});

当我单击标记为“belonging_entire_world”的复选框时，它会隐藏我想要的表单部分（由#access_for_friends 和#access_for_groups 表示的部分），如果我再次单击，它会再次显示该部分但复选框“belonging_entire_world” “我检查过的总是在视觉上未经检查......

如果我在脚本运行后打开 firebug，我会看到我的复选框确实具有 checked=checked 属性......仍然，它在浏览器中看起来未选中（在所有浏览器中！）......

我尝试在切换功能的第一个功能中添加以下内容：

$("#belonging_entire_world").attr('checked', true);

但仍然......它仍然好像没有被检查......

这让我发疯，我没有看到删除 jQuery 代码的另一个选项，我真的不明白......我把视图的一部分放在下面：

<div id="Belonging-Access-Control">
      <h2> Who will be able to see & access this? </h2>
      <div class="field" id="entire_world">
        <%= f.check_box(:entire_world) %>
        <%= f.label(:entire_world, "The entire world!") %>
      </div>

      <div class="field" id="access_for_friends">
        <%= f.check_box(:access_for_friends) %>
        <%= f.label(:access_for_friends, "My friends") %>
      </div>

和页面的 HTML，在我选中复选框（萤火虫输出）后：

<div id="Belonging-Access-Control">
<h2> Who will be able to see &amp; access this? </h2>
<div id="entire_world" class="field">
<input type="hidden" value="0" name="belonging[entire_world]">
<input id="belonging_entire_world" type="checkbox" value="1" name="belonging[entire_world]" checked="checked">
<label for="belonging_entire_world">The entire world!</label>
</div>
<div id="access_for_friends" class="field" style="display: none;">
<input type="hidden" value="0" name="belonging[access_for_friends]">
<input id="belonging_access_for_friends" type="checkbox" value="1" name="belonging[access_for_friends]">
<label for="belonging_access_for_friends">My friends</label>
</div>
4

2 回答 2

1

使用 .toggle() 似乎有问题。如果你使用这个功能可以吗？：

$("#belonging_entire_world").click(function() {
    if (this.checked) {
        $("#access_for_friends, #access_for_groups").fadeOut();
    } else {
        $("#access_for_friends, #access_for_groups").fadeIn();
    }
});

如果您想要相反的淡入淡出，您可以切换淡入淡出。如果复选框开始为“已选中”，这可能是一个更好的解决方案。因此，此代码将根据复选框的状态隐藏/显示其他 div，而不是切换它所在的阶段。

于 2012-06-27T14:29:33.210 回答
-1

.toggle() 如前所述有效，但是我个人更喜欢的另一种方法是检查复选框的状态

这样，您可以链接不同的条件事件以显示/隐藏表单中的额外部分。

于 2012-06-27T15:10:10.600 回答