[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:
$("#checkgroupId").getInfo().options

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) {
      $("#areasToClean").show();
   }
   else {
      $("#areasToClean").hide();
   }
}
$("#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) {
  aVals.push("accounting");
  var aOrderedVals = [];
  var aOpts = $("#selectServices").getInfo.options;
  for (i in aOpts) {
     if ($.inArray(aOpts[i].value, aVals)) {
        aOrderedVals.push(aOpts[i].value);
     }
  }
  $("#selectServices").setValue(aOrderedVals);
}

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);
  $("#selectServices").setValue(aVals);
}

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>
  </label>
  <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">
          <label>
            <input id="form[selectServices][accounting]" name="form[selectServices][]" 
                class="pmdynaform-control-checkgroup" value="accounting" type="checkbox">
            <span>Lawn Service</span>
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input id="form[selectServices][cleaning]" name="form[selectServices][]" 
                class="pmdynaform-control-checkgroup" value="cleaning" type="checkbox">
            <span>Cleaning Service</span>
          </label>
        </div>
        ...
      </div>
    <input id="form[selectServices_label]" name="form[selectServices_label]" 
        value="["Accounting",","Maintenance"]" type="hidden">
  </div>
</div>

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

$("#selectServices").find("div.checkbox").eq(0).hide()
$("#selectServices").find("div.checkbox").eq(2).show()

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

$("#selectServices").find("input[value=accounting]").parent().hide()
$("#selectServices").find("input[value=maintenance]").parent().show()

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')

[programerboy]

Thnaks Amos for your education.

[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(){
  
  if(getField('checkgroupname][option1').checked){
    disable(getField('checkgroupname][option2'));
    }
  
  if(!getField('checkgroupname][option1').checked){
    enable(getField('checkgroupname][option2'));
    }

  if(getField('checkgroupname][option2').checked){
    disable(getField('checkgroupname][option1'));
    }
  
  if(!getField('checkgroupname][option2').checked){
    enable(getField('checkgroupname][option1'));
    }
}

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

[DannyShimmer1]

Very useful information

[GHDSPORTS]

Really appreciate you sharing this blog post.Much thanks again. Fantastic. https://ghd-sports.com/ghd-sports-ios/

[iacsvrn]

Can you give, please, an example of uncheck all checkbox, when form are loading from last to next step?

[Thicitch]

to make a specific example, it's quite difficult. you can also ask the question here to receive the answers