jquery .each 迭代

Question

我是学习 jquery 的新手，所以如果这是一个相对简单的问题，我深表歉意。我有一个 ID 为 ChartstoDisplay 的 asp.net 复选框列表。我正在尝试创建 jquery 来根据是否选中单个列表项复选框来回切换样式。我的代码如下，样式“已选择”应更改为选中的复选框为粗体绿色文本，但没有任何反应。

<script type="text/javascript">
    $(document).ready(function () {
        $('#ChartstoDisplay').click(function () {
            $('input').each(function () {
                if ($(this).is(':checked'))
                    $(this).toggleClass("selected");
            });
        });

    });
</script>

我的理解是 'input'.each 遍历复选框列表中的元素以查找输入标签，然后下一行使用 this 变量检查复选框是否被选中，如果是的话应该改变它的风格。

Answer 1

它有效。不过，它可能不会做你想要的。首先，你能告诉我们你附加到 .selected 的 CSS 是什么吗？

这是做什么的，它将切换所有当前选中的框。假设您有盒子 A、B 和 C。

• 点击 A。框 A 已选中。方框 A 被切换。选中的只有 A。
• 点击 B。选中框 A 和 B。两者都被切换。选中的只有B。
• 点击 C。选中框 A、B 和 C。所有这些都被切换。现在选择 A 和 C。
• 点击 B，取消选中它。 A 和 C 被检查，并且它们被切换(但不是 B)。没有任何选择。

如果这是您想要的，那很好，但我想不出需要这种奇怪行为的单个应用程序。

我想你想要的是:

$(document).ready(function () {
    $('#ChartstoDisplay').on("click", "input:checkbox", function() {
        $(this).toggleClass("selected");
    });
});​

编辑:鉴于 fiddle 中提供的代码 OP，这里是更新后的答案(fiddle)

$(document).ready(function() {
    $('#ChartstoDisplay').on("click", "input:checkbox", function() {
        $(this).next().toggleClass("selected");
    });
});​