Question

我有一个带有6个复选框的ASP.NET Web表单。 1复选框用于调用功能以选中所有复选框并显示消息“您已选择”6“项目”（在本例中为6复选框）。如果用户没有选中Select All复选框，他们可以单独选择或取消选中其他复选框，并且消息将是“您已选择”＃“items”我正在尝试在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' });

    }

仅当选择了SelectAll复选框时，才会显示该消息。如果选择或取消选中其他复选框，则不会显示该消息。

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

感谢您的输入。

Answer 1

要仅返回页面上所选复选框的数量，请尝试更改选择器并使用类似的内容

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

这应该会为您提供已选中复选框的数量。

$("input:checked").length

也会有用，但我是一个特殊的笨蛋。

Answer 2

使用像$('.CheckBoxClass input:checkbox')

这样的选择器可能会更好

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

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

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

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

jQuery逐步计算所选复选框并取消选中复选框

2 个答案: