Skip to content

How to add my custom jQuery in admin uiComponent form

Is there any way that I can add a JS/Jquery file which may able to listen my uicomponent’s (checkbox/Radio) event (like OnClick or OnChange) so that I can do some operation with that.
That UiComponent i used for an admin form (mentioned below). Please help me on how to add a js/jquery in admin uiComponent form.
Actually I want to avoid knockoutJS because of its complexity and lengthy process.

my_uicomponent_form.xml

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="checkout_process_options">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="opened" xsi:type="boolean">false</item>
            <item name="label" xsi:type="string" translate="true">Checkout Process Settings</item>
        </item>
    </argument>
    <field name="main_data">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">SHasanMyModuleModelSourceDataMainData</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Main Data</item>
                    <item name="formElement" xsi:type="string">radioset</item>
                    <item name="disabled" xsi:type="boolean">false</item>                        
                </item>
        </argument>
    </field>        
    <field name="secondary_options">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">SHasanMyModuleModelSourceDataSecondaryOptions</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Secondary Options</item>
                    <item name="formElement" xsi:type="string">checkboxset</item>
                    <item name="disabled" xsi:type="boolean">false</item>                        
                </item>
        </argument>
    </field>
    <field name="optional_options">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">SHasanMyModuleModelSourceDataOptionalOptions</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Optional Options</item>
                    <item name="formElement" xsi:type="string">checkboxset</item>
                    <item name="disabled" xsi:type="boolean">false</item>                        
                </item>
        </argument>
    </field>
</fieldset>