Page 1 of 1

How to access checkgroups with JavaScript

Posted: Thu Dec 14, 2017 8:44 pm
by amosbatto
Accessing Checkgroups with JavaScript
A checkgroup consists of a set of checkboxes. The list of options (i.e., checkboxes) in a checkgroup
can be obtained in the model information with the following JavaScript code:

For example, if a checkgroup has the ID "selectServices", the following code gets the list of options in the "selectServices" checkgroup:
Code: Select all
var aOpts = $("#selectServices").getInfo().options
Now the variable aOpts has the following contents:
Code: Select all
    label:    "Accounting & Auditing",
    value:    "accounting", 
    selected: false
    label:    "Cleaning Service",
    value:    "cleaning",  
    selected: false
    label:    "Maintenance & grounds",  
    value:    "maintenance",  
    selected: false
The selected property is set to true if the checkbox is marked by default.
If needing to get the current state of the checkboxes, then use getValue() not the selected property.

Use the length property of the options array to get the number of checkboxes in a checkgroup:
Code: Select all
var numberOptions = $("#selectServices").getInfo().options.length

Use the getValue() method to get an array of the values of the marked checkboxes in the checkgroup.
For example:
Code: Select all
var aValues = $("#selectServices").getValue();
Now the aValues variable contains the array ["accounting", "maintenance"], since the first and third checkboxes in the checkgroup are marked.

Likewise, use the getText() method to get a JSON string of the labels of the marked checkboxes. JSON.parse() can be used to convert the string into an array of the selected labels. For example:
Code: Select all
var aLabels = JSON.parse($("#selectServices").getText());
Now the aLabels variable contains the array ["Accounting & Auditing", "Maintenance & grounds"].

For example, the following JavaScript code uses the setOnchange() method to set an event handler to check whether the "cleaning" checkbox is marked when the checkgroup changes.
$.inArray() is used to search for "cleaning" in the array of selected values of the checkgroup.
If it is found, then the textarea "areasToClean" is shown; otherwise it is hidden.
Code: Select all
function hideShowAreasToClean(newServices, oldServices) {
   //if "cleaning" is selected, then show "areasToClean" textarea:
   if ($.inArray("cleaning", newServices) != -1) {
   else {
$("#selectServices")setOnchange(hideShowAreasToClean);      //when checkgroup changes
hideShowAreasToClean($("#selectServices").getValue(), []);  //when DynaForm loads
The setValue() method can be used to mark checkboxes in a checkgroup. setValue() takes
an array of the checkbox values to mark in the checkgroup. Note that the values have to be listed in the
array in the same order as they appear in the checkgroup. For example, the following code marks
the first and third options in the "selectServices" checkgroup:
Code: Select all
$("#selectServices").setValue(["accounting", "maintenance"]);
If the order is reversed, and the third option is listed first in the array and the first option is listed last,
then the checkboxes will not be marked correctly. This code will NOT will not mark the
checkboxes, because the options are listed out of order:
Code: Select all
$("#selectServices").setValue(["maintenance", "accounting"]);
If needing set just one checkbox, but leave the other checkboxes unchanged in the checkgroup, then use
$.inArray() to first check whether the checkbox is not already marked. If unmarked,
then mark it using push() to add the value of the checkbox to the array.
Then, loop through the list of getInfo().options to recreate the array in the proper order and
pass that array to setValue().

For example, the following JavaScript code marks the "accounting" option in the "selectServices" checkgroup, if it is not already marked:
Code: Select all
var aVals = $("#selectServices").getValue();
if ($.inArray("accounting", aVals) != -1) {
  var aOrderedVals = [];
  var aOpts = $("#selectServices").getInfo.options;
  for (i in aOpts) {
     if ($.inArray(aOpts[i].value, aVals)) {
Similarly, the following code uses setValue() to unmark (unselect) the "accounting" checkbox in the "selectServices" checkgroup if the checkbox is not already unmarked. It uses the splice() method to remove the value from the array of selected values.
Code: Select all
var aVals = $("#selectServices").getValue();
var pos = $.inArray("accounting", aVals);
if (pos != -1) {
  aVals.splice(pos, 1);
Checkgroups have the following HTML structure:
Code: Select all
<div id="selectServices" class="pmdynaform-field-checkgroup  form-group col-sm-12 col-md-12 col-lg-12  
    pmdynaform-edit-checkgroup pmdynaform-field">
  <label for="form[selectServices]" class="col-sm-2 col-md-2 col-lg-2 control-label pmdynaform-label">
    <span class="textlabel">Select Services</span>
  <div class="col-sm-10 col-md-10 col-lg-10 pmdynaform-field-control">
    <div class="pmdynaform-control-checkbox-list form-control" style="height: auto;">
      <div class="pmdynaform-checkbox-items">
        <div class="checkbox">
            <input id="form[selectServices][accounting]" name="form[selectServices][]" 
                class="pmdynaform-control-checkgroup" value="accounting" type="checkbox">
            <span>Lawn Service</span>
        <div class="checkbox">
            <input id="form[selectServices][cleaning]" name="form[selectServices][]" 
                class="pmdynaform-control-checkgroup" value="cleaning" type="checkbox">
            <span>Cleaning Service</span>
    <input id="form[selectServices_label]" name="form[selectServices_label]" 
        value="["Accounting",","Maintenance"]" type="hidden">
Each checkbox in the checkgroup is placed inside a div, whose class is named "checkbox". The following JavaScript code hides the first checkbox and shows the third checkbox in the "selectServices" checkgroup:
Code: Select all
In this example, find() returns an array of the divs holding checkboxes and eq() is used to select one of them. Note that arrays start counting from the number 0, so the first checkbox is element 0 in the array and the third checkbox is element 2. The checkboxes in checkgroups can also be found by searching for their value.

The following code has the same effect as the previous code example:
Code: Select all
Note that hiding a checkbox does not prevent its value from being saved when the DynaForm is submitted.

To disable a checkbox in a checkgroup, set its disabled property to true
and set the color of the <code>span</code> holding the checkbox's label to grey. The following code disables
the "accounting" checkbox and enables the "maintenance" checkbox:
Code: Select all
$("#selectServices").find("input[value=accounting]").prop("disabled", true)
$("#selectServices").find("input[value=accounting]").siblings("span").css("color", "grey")
$("#selectServices").find("input[value=maintenance]").prop("disabled", false)
$("#selectServices").find("input[value=accounting]").siblings("span").css("color", "") //return to default color
getControl() will return an array of all the checkboxes in a checkgroup. Use eq() to access a particular checkbox in that array and remember that counting in arrays starts from 0.

For example, the following code sets the label of the second checkbox in the "selectServices" checkgroup.
It uses siblings() to select the span element next to the checkbox which holds the checkbox's label.
Code: Select all
$("#selectServices").getControl().eq(1).siblings("span").html('<font color="green">Cleaning</font><br>Service')
It is also possible to do the same thing by searching for the checkbox's value:
Code: Select all
$("#selectServices").find("input[value=cleaning]").siblings("span").html('<font color="green">Cleaning</font><br>Service')

Re: How to access checkgroups with JavaScript

Posted: Tue Dec 19, 2017 6:47 am
by programerboy
Thnaks Amos for your education.

Re: How to access checkgroups with JavaScript

Posted: Fri Jan 31, 2020 7:55 pm
by amform
Just to add; if you have 2 check boxes and you want the user to just select one of them. You can use this code to do so. Version 2.8 PM:
Code: Select all
function detail_disable(){


getField('checkgroupname][option1').onchange = detail_disable;
getField('checkgroupname][option2').onchange = detail_disable;

Re: How to access checkgroups with JavaScript

Posted: Thu Apr 23, 2020 11:45 am
by DannyShimmer1
Very useful information :D

Re: How to access checkgroups with JavaScript

Posted: Sun Aug 09, 2020 11:45 am
Really appreciate you sharing this blog post.Much thanks again. Fantastic.

Re: How to access checkgroups with JavaScript

Posted: Wed Sep 30, 2020 9:53 am
by iacsvrn
Can you give, please, an example of uncheck all checkbox, when form are loading from last to next step?

Re: How to access checkgroups with JavaScript

Posted: Mon Oct 26, 2020 2:57 am
by Thicitch
to make a specific example, it's quite difficult. you can also ask the question here to receive the answers