Question

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

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

    });
</script>

我的理解是'input'.each正在遍历复选框列表中的项目，寻找输入标签，然后下一行，使用此变量，检查是否选中了复选框，如果是，应该改变它的风格。

Answer 1

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

这样做，它将切换所有当前选中的框。假设您有方框A，B和C.

点击A.选中方框A.方框A被切换。仅选择A。
点击B.选中Box 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");
    });
});

编辑：鉴于小提琴中提供的代码OP，这里是更新的答案（fiddle）

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

Answer 2

必须有别的东西，因为你的代码似乎是有效的，只有几个最佳实践：

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

请勿选中所有input，仅选择复选框。
仅选中所点击列表下的复选框。
使用:checked选择器删除过滤检查。

DEMO

Answer 3

$('input').each(...)正在遍历页面上的所有输入，而不仅仅是复选框，而不仅仅是属于“#ChartstoDisplay”的复选框。对于每个被检查的它应该成功切换类 - 我没有在你的代码中看到任何会停止工作的东西，所以也许你可以显示你的HTML？

您可以将代码简化为：

$('input:checked').toggleClass('selected');

这将切换所有匹配元素的类 - 无需使用.each()进行迭代。

或者只是在“#ChartstoDisplay”中做输入，这更接近你真正想做的事情：

$('input:checked', this).toggleClass('selected');

将第二个参数传递给$()函数时，只选择第二个参数的上下文中的元素 - 我正在传递this，因为那时this将是“#ChartstoDisplay “鉴于该行代码在”#ChartstoDisplay“点击事件处理程序中。

jquery。每次迭代

3 个答案: