- Thu Dec 14, 2017 8:44 pm
#812562
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:
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:
Use the getValue() method to get an array of the values of the marked checkboxes in the checkgroup.
For example:
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:
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.
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:
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:
$.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:
The following code has the same effect as the previous code example:
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:
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.
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
Now the variable aOpts has the following contents:
var aOpts = $("#selectServices").getInfo().options
Code: Select all
The selected property is set to true if the checkbox is marked by default. [
{
label: "Accounting & Auditing",
value: "accounting",
selected: false
},
{
label: "Cleaning Service",
value: "cleaning",
selected: false
},
{
label: "Maintenance & grounds",
value: "maintenance",
selected: false
}
]
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
Now the aValues variable contains the array ["accounting", "maintenance"], since the first and third checkboxes in the checkgroup are marked.var aValues = $("#selectServices").getValue();
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
Now the aLabels variable contains the array ["Accounting & Auditing", "Maintenance & grounds"].var aLabels = JSON.parse($("#selectServices").getText());
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
The setValue() method can be used to mark checkboxes in a checkgroup. setValue() takes 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
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
If the order is reversed, and the third option is listed first in the array and the first option is listed last, $("#selectServices").setValue(["accounting", "maintenance"]);
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
If needing set just one checkbox, but leave the other checkboxes unchanged in the checkgroup, then use $("#selectServices").setValue(["maintenance", "accounting"]);
$.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
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.
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);
}
Code: Select all
Checkgroups have the following HTML structure:
var aVals = $("#selectServices").getValue();
var pos = $.inArray("accounting", aVals);
if (pos != -1) {
aVals.splice(pos, 1);
$("#selectServices").setValue(aVals);
}
Code: Select all
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:
<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>
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. $("#selectServices").find("div.checkbox").eq(0).hide()
$("#selectServices").find("div.checkbox").eq(2).show()
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. $("#selectServices").find("input[value=accounting]").parent().hide()
$("#selectServices").find("input[value=maintenance]").parent().show()
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
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. $("#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
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
It is also possible to do the same thing by searching for the checkbox's value:
$("#selectServices").getControl().eq(1).siblings("span").html('<font color="green">Cleaning</font><br>Service')
Code: Select all
$("#selectServices").find("input[value=cleaning]").siblings("span").html('<font color="green">Cleaning</font><br>Service')