Using onclick with g:ui_checkbox

[mike_allgire]

Has anybody successfully used an onclick function call in a UI Page when using the g:ui_checkbox element? I want to use this element, because it aligns to ServiceNow's default theme; however it doesn't seem to call the function in the client script. This works without issue when using the input type="checkbox" tag, but the checkbox doesn't look as "pretty".

The result I am looking for is to get the id and / or name of the element when clicked.

HTML

Example 1:
<input type="checkbox" id="${jvar_pdt_id}" name="${jvar_pdt_display}" onclick="setVersion(this)"/> <!--This works; calls the function and returns the alert-->
Example 2:
<g:ui_checkbox id="${jvar_pdt_id}" name="${jvar_pdt_display}" onclick="setVersion(this)"/> <!--This does nothing-->

Client Script

function setVersion(elem){
         alert(elem.id + ' - ' + elem.name);
}

[mike_allgire]

Lost the HTML...

Example 1:
<input type="checkbox" id="${jvar_pdt_id}" name="${jvar_pdt_display}" onclick="setVersion(this)"/> <!--This works-->

Example 2:
<g:ui_checkbox id="${jvar_pdt_id}" name="${jvar_pdt_display}" onclick="setVersion(this)"/> <!--This doesn't-->

[mike_allgire · Accepted solution]

In short...I don't think this can happen, due to the ui macro for ui_checkbox already containing the onclick when called. I was able to get what I wanted by deconstructing the element through the browser. The end solution to get a clickable checkbox that was styled like the one used with the ui_checkbox call is below.

<span class="input-group-checkbox">
         <input id="${jvar_pdt_id}" name="${jvar_pdt_name}" class=" checkbox" type="checkbox" onClick="setVersion(this);"
         <input id="${jvar_pdt_id}" name="${jvar_pdt_name}" type="hidden"/>
         <label class="checkbox-label" for="${jvar_pdt_id}"/>
</span>

[lesley1]

Hi

If you are on a UI page you can override the ServiceNow onclick event by adding a function of your own with the same name setCheckBox.

HTML

<g:ui_checkbox name="checkboxName"/>

Client script

function setCheckBox(element){

   alert(element.name);

}

Which should alert ni.checkboxName

[Erica2]

Hello,

Can someone please help?  I have been searching on the web for many days, but I have no luck of finding an example of the below request. 

I need a button on the incident form. When a user click on the button, a popup window with 4 checkboxes and a OK and Cancel buttons. If a user select one or all checkboxes, then click on the OK button.  The select checkboxes information will populated in either the comment or work notes field on an incident form. If a user click on a cancel button, then it will close the popup window.

Thank you in advance