CODEWITHSUNDEEP
asp.netjavascriptjquery
narazana
narazana

Reputation: 1

jQuery incrementally count selected checkbox and deselected checkbox

I have an ASP.NET web form that has 6 checkbox. 1 checkbox is to call a Function to select all checkbox and show the message "You have selected" 6 "items" (in this case, 6 checkbox). If a user doesn't select the Select All checkbox, they can select or deselect other checkbox individually and the message will be "You have selected" # "items" I'm trying to do this in jQuery, but it's not working yet. Here's the script:

    <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. The message doesn't show if other checkbox is selected or deselected.

I look for an checkbox Id $("input[id ^= ctl00_ContentPlaceHolder1_dlTimeSheet_ctl]") instead of looking for a CSS class. On the markup 

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

will make the following HTML output:

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

The CSS class CheckBoxClass is not with the HTML input, that's why I'm looking for checkbox Id instead of checkbox class.

Thank you for the input.

Upvotes: 0

Views: 1683

Answers (2)

Ender
Ender

Reputation: 15221

You might be better off using a selector like $('.CheckBoxClass input:checkbox')

As for your problem of the number not updating, I'm looking at this line:

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

I don't see the .myCheckbox class anywhere. Try this:

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

Upvotes: 0

HurnsMobile
HurnsMobile

Reputation: 4381

To return just the number of selected checkboxes on the page try changing your selector around a bit and using something like this

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

That should give you the number of checked checkboxes.

$("input:checked").length

Will also work but Im a dork for specificity.

Upvotes: 1

Related Questions