jQuery增量计数选定的复选框和取消选中的复选框

问题描述：

我有一个ASP.NET web窗体，有6个复选框。 1复选框是调用一个函数来选择所有复选框，并显示消息“您已选择”6“项目”（在这种情况下，6复选框）。如果用户没有选择全选复选框，他们可以单独选择或取消选中其他复选框，并且该消息将是“您已选择”＃“项目”我试图在jQuery中执行此操作，但它尚未运行。这里的脚本：只有当选择全选复选框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' }); 

    }

的消息显示。该消息不显示是否选中或取消选择其他复选框。

我查找复选框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而不是复选框类。

感谢您的意见。

我承认这一点，我读了三遍，但我仍然不明白究竟是什么工作，什么不是。 – 2010-01-27 18:32:02

这里是选中所有复选框的标记，并且它正确显示消息但其他复选框不起作用，无论是选中还是取消选中，邮件都不会显示。其他复选框的OnClick事件不起作用，我认为。我真的不知道问题在哪里。 – narazana 2010-01-27 18:46:38

答

要返回页面中选择复选框的只是数量尝试了一下周围改变你的选择和使用这样的事情

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

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

$("input:checked").length

也可以工作，但我是一个专门性的dork。

答

你可能会使用类似$('.CheckBoxClass input:checkbox')

至于你的号没有更新问题的一个选择会更好，我期待在这一行：

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

我没有看到。 myCheckbox类的任何地方。试试这个：

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

jQuery增量计数选定的复选框和取消选中的复选框

相关推荐