jQuery增量计算选中的复选框和取消选中的复选框答案

【问题标题】：jQuery incrementally count selected checkbox and deselected checkboxjQuery增量计算选中的复选框和取消选中的复选框
【发布时间】：2010-12-30 00:45:55
【问题描述】：

我有一个包含 6 个复选框的 ASP.NET Web 表单。 1 个复选框是调用一个函数来选择所有复选框并显示消息“您已选择”6 个“项目”（在本例中为 6 个复选框）。如果用户没有选择全选复选框，他们可以单独选择或取消选择其他复选框，消息将是“您已选择”#“项目”我正在尝试在 jQuery 中执行此操作，但它还没有工作。这是脚本：

    <script  type="text/javascript">
    //This function works on the click event of SelectAll checkbox
    function selectAll(involker) {
        $('input:checkbox').attr('checked', $(involker).attr('checked'));

        var count = $(":checkbox:checked").length;
        $("#selectedCheckboxMessage").html(count).css({ 'background-color': '#228B22', 'font-weight': 'bolder', 'color': '#FFFFFF', 'padding-left': '0.5em', 'padding-right': '0.5em' });

    }

    //Not working, the message wont's show up on the click event of the checkbox
    $(function() {

        $("input[id ^= ctl00_ContentPlaceHolder1_dlTimeSheet_ctl]").click(showCheckboxStatus);

    });

    function showCheckboxStatus(evt) {

        var numSelected = $(":checkbox:checked").length;
        $("#selectedCheckboxMessage").html("You have selected " + numSelected).css({ 'background-color': '#228B22', 'font-weight': 'bolder', 'color': '#FFFFFF', 'padding-left': '0.5em', 'padding-right': '0.5em' });

    }

The message shows only when a SelectAll checkbox is selected.如果选中或取消选中其他复选框，则消息不会显示。

我寻找一个复选框 ID $("input[id ^= ctl00_ContentPlaceHolder1_dlTimeSheet_ctl]") 而不是寻找 CSS 类。在标记上

<asp:CheckBox ID="cbMarkAsComplete" runat="server" CssClass ="CheckBoxClass"   />

将产生以下 HTML 输出：

<span class="CheckBoxClass"><input type="checkbox" name="ctl00$ContentPlaceHolder1$dlTimeSheet$ctl00$cbMarkAsComplete" id="ctl00_ContentPlaceHolder1_dlTimeSheet_ctl00_cbMarkAsComplete"></span>

CSS 类 CheckBoxClass 不与 HTML 输入一起使用，这就是我寻找复选框 Id 而不是复选框类的原因。

感谢您的意见。

【问题讨论】：

我承认，我读了三遍，仍然不明白什么是有效的，什么是无效的。
这里是选中所有复选框的标记，它正确显示了消息但其他复选框不起作用，无论是选中还是取消选中，消息都不会显示。我认为另一个复选框的 OnClick 事件不起作用。我真的不知道问题出在哪里。

标签： asp.net javascript jquery

【解决方案1】：

要仅返回页面上选定复选框的数量，请尝试稍微更改选择器并使用类似的东西

$("input[type='checkbox']:checked").length

这应该会给你选中的复选框的数量。

$("input:checked").length

也可以，但我不喜欢特异性。

【讨论】：

【解决方案2】：

你最好使用$('.CheckBoxClass input:checkbox')这样的选择器

至于你的号码不更新的问题，我在看这一行：

var numSelected = $("input.myCheckbox:checked").length;

我在任何地方都看不到 .myCheckbox 类。试试这个：

var numSelected = $('.CheckBoxClass input:checked').length;

【讨论】：