oracleoracle-apexoracle-apex-18.2oracle-apex-19.2

Oracle Apex - check all items in classic report - more than one classic report on page


On a page I have two classic report in different tabs.

I'm adding options: check all

eg.

In classic report query column

apex_item.checkbox2(1,country_id) checkbox_ID

On Heading column checkbox_ID

<input type="checkbox" id="checkAll" >

Function and Global Variable Declaration

$('#checkAll').click(function () { 
   $('input:checkbox').prop('checked', this.checked); 
});

Work fine on one classic report, but when add select option on second classic report after click on checkbox all item select all items in both classic report!

On second classic report I'm changing

<input type="checkbox" id="checkAll_TAB2" >

and

$('#checkAll_TAB2').click(function () { 
   $('input:checkbox').prop('checked', this.checked); 
});

Inspect element on page shows:

classic report 1

<input type="checkbox" name="f01" value="1">
<input type="checkbox" name="f01" value="2">

classic report 2

<input type="checkbox" name="f01" value="5">
<input type="checkbox" name="f01" value="6">

Any solutions?


Solution

  • The command $('input:checkbox').prop('checked', this.checked); will check all checkboxes on the page, not just the ones for the column that you clicked the header for.

    One solution is to give each of the report regions a static id and use that in the function. For example I created 2 reports, one with static id 'EMP1', one with 'EMP2'. It works ok for me. If you have multiple columns with checkboxes you'll need another option.

    $('#checkAll').click(function () { 
        //$('input:checkbox').prop('checked', this.checked); 
        $('#EMP1').find('input:checkbox').prop('checked', true);
    });
    $('#checkAll_TAB2').click(function () { 
        $('#EMP2').find('input:checkbox').prop('checked', true);
    });