0

我是学习 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 变量检查复选框是否被选中，如果是，它应该会改变这是风格。

4

3 回答 3

1

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

它的作用是切换所有当前选中的框。假设你有盒子 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");
    });
});​

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

$(document).ready(function() {
    $('#ChartstoDisplay').on("click", "input:checkbox", function() {
        $(this).next().toggleClass("selected");
    });
});​
于 2012-05-16T00:18:16.270 回答
0

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

<script type="text/javascript">
    $(document).ready(function () {
        $('#ChartstoDisplay').click(function () {
            $('input[type="checkbox"]:checked', this).toggleClass("selected");
        });
     });
</script>
  • 不要选择所有inputs，只选择复选框。
  • 仅选择单击列表下的复选框。
  • 使用:checked选择器删除过滤检查。

演示

于 2012-05-16T00:17:44.033 回答
0

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

您可以将代码简化为：

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

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

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

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

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

于 2012-05-16T00:20:45.193 回答