​​How to check/uncheck all Checkboxes rows inside a Repeater?

Last Update: November 21, 2017

In this use case you will learn how to check or uncheck all instances of a CheckBoxes row inside a Repeater. Here are the steps on how to do that:

  1. Open the form in design mode.
  2. Add the following to the form design workspace:
    How to check or uncheck all Checkboxes rows inside a Repeater.jpg
  3. Select CheckBox1 control and set Css Classes property to checkAll.
  4. Select CheckBox2 control to add a new rule.
  5. In the Rules pane, click on the Add icon to add a new rule, the Rule Manager dialog will open.
    How to auto-shifting Panel control in a form2.jpg
  6. Add a new rule at Date1 control as follows:
    A. Change the Rule Name as desired.
    B. Change the Rule Type to Action.
    C. Change the Event Type to onChange. Check "Execute if event triggered only on this control".
    D. In the Condition section, type the following:
          controlValueChanged(CheckBox2)
    E. In the Action section, type one of the following script:
        // The idea is to use a CSS Class property of the CheckBox1 in this rule.
       var enableValue=getCheckBox(CheckBox2)
       $('.checkAll').each(function () {
       $(this).prop('checked',enableValue)
       });
    F. Click on the Save button to save the rule.
    Note: You can use Assistance Panel to help you adding functions and related parameters, form variables and form controls to Conditions and/or Actions sections.
  7. Test the form by clicking on the Preview button in the View group.