JQuery - 通过复选框的 div 可见性答案

【问题标题】：JQuery - div visibility via checkboxJQuery - 通过复选框的 div 可见性
【发布时间】：2012-03-20 10:33:07
【问题描述】：

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

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

感谢您的帮助。

【问题讨论】：

对于初学者来说，这个 fiddle 没有使用 jQuery，它正在执行 $(document).ready(... 并且 JS 设置为运行 onLoad，因此该事件已经触发并且不会开始运行您的代码跨度>

【解决方案1】：

查看您的代码：

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

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

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

应该是：$('#checkbox1')

【讨论】：

【解决方案2】：

如果所有 div 都开始隐藏并且所有复选框都开始取消选中，那么您可以在更改事件中调用 toggle()：http://jsfiddle.net/wzMM4/12/

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

【讨论】：

【解决方案3】：

我发现你的 jsfiddle 有两个问题。一，您将它设置为 MooTools 并且您正在尝试测试 jQuery。其次，您需要将 checkbox1 的选择器设置为 ID，而不是类（即 # 而不是 .）

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

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

【讨论】：

【解决方案4】：

小提琴没有按保存状态运行，因为它使用的是 MooTools，而且 - 我认为关键点 - 你引用的是复选框的 class 而不是它的 id。更新它以使用 jquery 并将您的代码更改为

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

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

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

【讨论】：