Check Uncheck All Checkboxes using Jquery in Oracle APEX

Here I am giving an example to check uncheck all checkboxes using Jquery in Oracle APEX.

Step 1: Create a Page.

Step 2: Create a Region.

Step 3: Create a Checkbox item.

Step 4: Create List of Value.

• Go to Shared Components.
• Click on List of Values under other components.

• Click on Create option to create LOV from scratch.

• Choose LOV source as "From Scratch"

• Give valid name and choose LOV type as "Static"

• Enter Static Display Values as below,

        

Step 5: Go to page item's list of values and choose fxgn_checkbox_values (LOV) from shared components and set it.

Step 5: Go to Page item's Appearance and set Css Classes "check_uncheck_all_checkboxes"

Step 6: Go to Page item's Inline Help Text and copy and paste below HTML Code (Which will create a HTML Button)

HTML Code:

<button class="t-Button t-Button--small" id="check_box" type="button">Check All</button>

Step 7: Create a Dynamic Action to check and uncheck all checkbox values as below,

Event: Click

Selection Type: jQuery Selector

jQuery Selector: #check_box

Type: JavaScript expression

JavaScript expression: $(this.triggeringElement).text() === "Check All"

True Action: 

1) Execute JavaScript Code

$(".check_uncheck_all_checkboxes input[type=checkbox]").prop('checked', true);

$(this.triggeringElement).text('Uncheck All');

2) Execute PL/SQL Code

To submit checkbox values in apex session.

False Action:

1) Execute JavaScript Code

$(".check_uncheck_all_checkboxes input[type=checkbox]").prop('checked',false);

$(this.triggeringElement).text('Check All');

2) Execute PLSQL Code

To submit checkbox values in apex session.

Output: (Checkbox Values)

Output: (Item Values in Session)

Click on Session option to view checkbox item values in apex session as below,

The demo is here

That's it.

Happy APEXing!!!...