How to check All the checkboxes Auto using DA, JS - Tips and Tricks (Oracle APEX)

 

How to check All the checkboxes Auto using DA, JS 

Oracle Apex 

Check All (Checkbox)

• Create Blank Page 
• Add 6 checkboxes items rename it as above screen 
• The P85_CHK_6 label name "Check all "to hold the main DA as below 

  

•  Add Dynamic Action on P85_CHK_6  set the following:-

               Client-side Condition : Typy (items is not null) , item (P85_CHK_6 )

                True Action as following:-

                       Action (Execute JavaScript Code)

       Code:  

var ckbox =  $('#P85_CHK_6'); 

var ckbox1 = $('#P85_CHK1');

var ckbox2 = $('#P85_CHK2');

var ckbox3 = $('#P85_CHK3');

var ckbox4 = $('#P85_CHK4');

var ckbox5 = $('#P85_CHK5');

 if (ckbox.is(':checked')) {

     ckbox1.prop('checked', true);

     ckbox2.prop('checked', true);

     ckbox3.prop('checked', true);

     ckbox4.prop('checked', true);

     ckbox5.prop('checked', true);

     console.log( 'Check All Checked');

 } else{ 

     ckbox1.prop('checked', false);

     ckbox2.prop('checked', false);

     ckbox3.prop('checked', false);

     ckbox4.prop('checked', false);

     ckbox5.prop('checked', false);

     console.log( 'Check All UnChecked'); 

  }  

•  Now we will check the "Check All" check box in case all the check box are selected, so we have to write DA for each item

• Add Dynamic Action on P85_CHK1 set the following:-

          Client-side Condition : Typy (items is not null) , item (P85_CHK1)

          True Action as follwing :-

             Action (Execute JavaScript Code)

              Code : 

var ckbox = $('#P85_CHK_6');

var ckbox1 = $('#P85_CHK1');

var ckbox2 = $('#P85_CHK2');

var ckbox3 = $('#P85_CHK3');

var ckbox4 = $('#P85_CHK4');

var ckbox5 = $('#P85_CHK5');

if (ckbox1.is(':checked') && 

     ckbox2.is(':checked') && 

      ckbox3.is(':checked') && 

       ckbox4.is(':checked') && 

        ckbox5.is(':checked')) {

         ckbox.prop('checked', true);

        } else {

              ckbox.prop('checked', false);

}

The End