Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
0
Check/Uncheck Select All header checkbox using jquery
posted

Hi,

i wanted to check or uncheck  SelectAll header checkbox on specific condition. so how can i check do that programmatically.

I found some workaround to do it programmatically.

$('#ig1').find('[name="hchk"]').data("chk","off").find("span").removeClass( "ui-igcheckbox-normal-off" ).addClass( "ui-igcheckbox-normal-off" );

but above work around fail when checkbox clicked and checked previously and using above code i unchecked it and then clicked to checked that time it actually perform deselection of rows but it must perform Selection of all rows.

  • 485
    Offline posted

    Hello Adhikar,

     

    Thank you for posting in our forum.

    Please check the attached sample: I initialize a grid that has a checkbox in the first column header - it toggles the checkboxes for the whole column. There is a grid option "renderCheckboxes" which I have set to "true" - it renders checkboxes for every boolean column automatically. As some customization is required, here is what I do:

    • On the grid’s “rendered” event, I attach a “click” event handler to the column header that contains the “select all” checkbox.
    • When the user clicks the header checkbox, I check if it has the CSS class “.ui-igcheckbox-small-off” and toggle it by using jQuery’s addClass and removeClass methods.
    • After that I iterate the data source to set the “Available” property of every record to “false”/”true” accordingly.
    • Finally, I call the grid’s “dataBind” method in order to update the UI

    If you have any further questions regarding this matter, or you need any additional assistance, feel free to contact me.

    SelectAllCheckboxSample.zip

  • 0
    Offline posted

    jQuery is() method is to check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments. If no element fits, or the selector is not valid, then the response will be 'false'. This method traverses along the DOM elements to find a match, which satisfies the passed parameter.


    if ($("input[type=checkbox]").is(":checked")) {
    alert("Checked");
    }