asked on

Checkbox

Hi,

I have a checkboxes one of them is for all

If I click on all checkbox it should select the rest of the checkbox if I uncheck the all checkbox it should uncheck.

this is what I have:

$('.chkHeader input').click(function () {
        $(".chkHeader input").each(function () {
            $(this).attr('checked', $('.chkHeader input').attr('checked'));
        });
     });




 <tr>
                    <td valign="top" style="text-align:right;padding-right:5px;">&nbsp;</td>
                    <td width="8%" align="left" valign="top" style="padding-left:5px;"><input type="checkbox" value="ALL" name="ALL" id="ALL" />
                    <label for="ALLID" style="font-size:12px;">ALL</label></td>
                    <td width="9%" align="left" valign="top" style="padding-left:5px;"><input class="chkHeader" type="checkbox" value="Open" name="Open" id="Open" />
                    <label for="OpenID" style="font-size:12px;">Open</label></td>
                    <td width="8%" align="left" valign="top" style="padding-left:5px;"><input class="chkHeader" type="checkbox" value="Close" name="Close" id="Close" />
                    <label for="CloseID" style="font-size:12px;">Close</label></td>
                    <td width="9%" align="left" valign="top" style="padding-left:5px;"><input class="chkHeader" type="checkbox" value="Updates" name="Updates" id="Updates" />
                    <label for="UpdatesID" style="font-size:12px;">Updates</label></td>
                    <td width="48%" align="left" valign="top" style="padding-left:5px;"><input class="chkHeader" type="checkbox" value="Deferred" name="Deferred" id="Deferred" />
                    <label for="DeferredID" style="font-size:12px;">Deferred</label></td>
                  </tr>

Open in new window

Coast Line

The Code for Uncheck and Check is like this:

Do like this:

$('.chkHeader').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
    });


<fieldset><legend>Form</legend>
<tr>
                    <td valign="top" style="text-align:right;padding-right:5px;">&nbsp;</td>
                    <td width="8%" align="left" valign="top" style="padding-left:5px;"><input type="checkbox" value="ALL" name="ALL" id="ALL" />
                    <label for="ALLID" style="font-size:12px;">ALL</label></td>
                    <td width="9%" align="left" valign="top" style="padding-left:5px;"><input class="chkHeader" type="checkbox" value="Open" name="Open" id="Open" />
                    <label for="OpenID" style="font-size:12px;">Open</label></td>
                    <td width="8%" align="left" valign="top" style="padding-left:5px;"><input class="chkHeader" type="checkbox" value="Close" name="Close" id="Close" />
                    <label for="CloseID" style="font-size:12px;">Close</label></td>
                    <td width="9%" align="left" valign="top" style="padding-left:5px;"><input class="chkHeader" type="checkbox" value="Updates" name="Updates" id="Updates" />
                    <label for="UpdatesID" style="font-size:12px;">Updates</label></td>
                    <td width="48%" align="left" valign="top" style="padding-left:5px;"><input class="chkHeader" type="checkbox" value="Deferred" name="Deferred" id="Deferred" />
                    <label for="DeferredID" style="font-size:12px;">Deferred</label></td>
                  </tr>
</fieldset>

Open in new window

I had added the fieldset option to your form, you can remove it and also you can remove the closest(fieldset), if you do not want to use it like this

$('.chkHeader').on('click', function () {
        $(this).find(':checkbox').prop('checked', this.checked);
    });

Open in new window

Gary

Not clear what you are trying check/uncheck but the correct syntax is

$(this).attr('checked', $('.chkHeader input').is(':checked'));

Open in new window

ASKER CERTIFIED SOLUTION

Coast Line

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lulu50

ASKER

Thank you.