JQuery - 通过复选框div可见性

Question

我的页面上有一系列匹配的复选框和div。每个复选框都需要能够在选中/取消选中时显示/隐藏相应的div。每个div都在页面加载时隐藏起来。我在这里已经阅读了很多关于类似问题的主题，但我无法让任何示例符合我的要求。

我在JSFiddle上设置了一个示例：http://jsfiddle.net/shimmoril/wzMM4/11/。我认为有style =“display：none;”在div上可能会搞乱JQuery，但是当我从第一个div中删除它时，切换仍然无法正常工作。

感谢您的帮助。

Answer 1

查看您的代码：

<input type="checkbox" id="checkbox1" value="1" />

然而你的JQuery正在寻找一个类：

 $('.checkbox1').change(function() {
    $('#div1').toggle(!this.checked);
});

应该是：$（'＃checkbox1'）

Answer 2

我看到你的jsfiddle出了两个问题。一，你把它设置为MooTools并且你正在尝试测试jQuery。其次，您需要将checkbox1的选择器设置为ID，而不是类（即＃而不是。）

将您的小提琴改为jQuery，然后使用此脚本代码：

$(document).ready(function() {
    $('#checkbox1').change(function() {
        $('#div1').toggle(!this.checked);
    });
});​

Answer 3

如果所有div都要隐藏起来并且所有复选框都要取消选中，那么您只需在更改事件中调用toggle（）：http://jsfiddle.net/wzMM4/12/

如果情况可能不是这样，您应首先添加一些代码以同步页面加载中的div可见性：http://jsfiddle.net/wzMM4/26/

Answer 4

小提琴没有保存，因为它正在使用MooTools，而且 - 我认为关键点 - 你引用了复选框的类而不是它的id。更新它以使用jquery并将代码更改为

$(document).ready(function() {
    $('#checkbox1').change(function() {
        $('#div1').toggle(!this.checked);
    });
});​

使其有效。如果您确定布局，可以使用类似于以下内容的方式来处理所有复选框，这是通用的 - 在选中任何复选框后，切换第二个元素（您的div）： / p>

$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        $(this).next().next().toggle(this.checked);
    });
});