You are viewing limited content. For full access, please sign in.

Question

Question

Giving Users Select All/Deselect All Option for Checkbox fields in a Table

asked on April 30

I'm working to enhance a current process where we give a user a list of students in a table that includes a checkbox field indicating they want to initiate a process for all students or only certain students. Some of the student lists are quite large (100-200) so I'd like to give users the option to Select All or Deselect All the checkbox fields in the table. I'm working in Modern Forms designer LF 12. Does anyone have any guidance on the best way to go about this?

0 0

Replies

replied on May 1

This works on my test form.  I attached the BP here as a text but you'll have to change it to an XML and import it. 

If you want to build a form manually it's easy; I suggest building a test form to see how this works and then add it to your live form.

 

Here's what you need:

Add a custom html field to your form and use this code. 

 

<button type="button" onclick="checkAllRows()" style="padding:8px 16px; cursor:pointer;">
  Check All
</button>
<button type="button" onclick="uncheckAllRows()" style="padding:8px 16px; cursor:pointer; margin-left:8px;">
  Uncheck All
</button>

Then in the JS of the form add this. Assuming here that your checkbox is fieldID 3 and your checkbox values is "YES". 

// Check every checkbox in the table (field 3) — works for any row count.
window.checkAllRows = function () {
  const CHECKED   = { value: ["YES"], otherChoiceValue: "" };
  const rows      = LFForm.getFieldValues({ fieldId: 3 }) || [];
  const rowCount  = rows.length;

  // Primary approach: column-wide broadcast (the one-liner you proved works).
  LFForm.setFieldValues({ fieldId: 3, rowIndex: 0 }, CHECKED);

  // Verify; if any row didn't take, fall back to per-row writes.
  const after = LFForm.getFieldValues({ fieldId: 3 }) || [];
  const allChecked = after.every(r => Array.isArray(r?.value) && r.value.includes("YES"));
  if (!allChecked) {
    for (let i = 0; i < rowCount; i++) {
      LFForm.setFieldValues({ fieldId: 3, rowIndex: i }, CHECKED);
    }
  }
};

window.uncheckAllRows = function () {
  const UNCHECKED = { value: [], otherChoiceValue: "" };
  const rowCount  = (LFForm.getFieldValues({ fieldId: 3 }) || []).length;

  LFForm.setFieldValues({ fieldId: 3, rowIndex: 0 }, UNCHECKED);

  const after = LFForm.getFieldValues({ fieldId: 3 }) || [];
  const allUnchecked = after.every(r => !Array.isArray(r?.value) || r.value.length === 0);
  if (!allUnchecked) {
    for (let i = 0; i < rowCount; i++) {
      LFForm.setFieldValues({ fieldId: 3, rowIndex: i }, UNCHECKED);
    }
  }
};

 

 

multi_select.txt (29.52 KB)
1 0
replied on May 4

This works perfectly. Thanks so much for the code.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.