Checkbox Item check / uncheck all

If you have an ordinary checkbox item based on a list of values, here is a function which will set all the values to checked or unchecked:

function checkboxSetAll (item,checked) {
 $("#"+item+" input[type=checkbox]").attr('checked',checked);
 $("#"+item).trigger("change");
}

For example:

checkboxSetAll("P1_ITEM", true); //select all
checkboxSetAll("P1_ITEM", false); //select none

It works this way because a checkbox item based on a LOV is generated as a set of checkbox input items within a fieldset.

Note: If it’s a checkbox column in a report, you can use this trick instead: Select All / Unselect All Checkbox in Interactive Report Header

Unique constraint WWV_FLOW_WORKSHEET_RPTS_UK violated
Monitoring AWS Costs

Comments

  1. Hi Jeffrey,
    I was very happy when I ran into this article, since it was exactly what I was looking for.
    I have added the function on the page in “Function and Global Variable Declaration”.
    Then I have created 2 buttons:
    – 1 to “Select All”
    – and 1 for “Select None”
    Both buttons call the appropriate functionusing a DA.
    When I click “Select All”, the checkboxes are all selected.
    Then when I click “Select None” all boxes are unchecked.
    However when I click “Select All” again, nothing happens.
    Do you have an idea why this is and, even better, how I should resolve this?

  2. Muahammad Zakria
    17 February 2021 - 3:51 pm

    Hi Jeffrey,

    how to keep checkbox checked even after page refresh in this scenerio please help.

    Thankyou

    • Hi Muahammad,

      Good question, and the answer is not simple. There are a few ways you might do this – the key thing being that you need to somehow store the state of each checkbox before the page is refreshed, and restore the state after the page has been re-rendered on the client.

      The question you’ll need to think about is where to store the state?

      1. Store it on the client, e.g. using localStorage to store the selected record IDs (this will be the fastest, but when the user goes to a different browser or device the selection will be lost)
      2. Store it on the server in the session state, e.g. using a dynamic action calling PL/SQL that stores the selected IDs in an APEX collection (this will be slower)
      3. Store it on the server in a database table, e.g. using a dynamic action calling SQL to insert the selected IDs in a table (this will also be slow, but will save the user’s selection across browsers and devices)

      You would need a dynamic action that listens to changes to the checkboxes and stores or removes the selected IDs from the data store, and a step on Page Load that restores the state and re-selects the checkboxes the user had checked. I would prefer method #1 mainly due to the performance aspect.

      Providing a full example on how to implement this is beyond the scope of a simple comment on this post, however – but I hope this gives you some helpful ideas.

      Jeff

  3. I had the same issue as Marco.

    After reading https://api.jquery.com/prop/#prop-propertyName which describes the difference between attr() and prop() I would use prop() instead.

    i.e.
    function checkboxSetAll (item,checked) {
    $(“#”+item+” input[type=checkbox]”).prop(“checked”, checked);
    $(“#”+item).trigger(“change”);
    }

    This fixes the “only works the first time” behaviour.

Leave a Reply

Your email address will not be published / Required fields are marked *