[Vuejs]-How to set checked on checkbox inside dynamically created table row?

by

0👍

✅

To set the dynamically added checkbox inside the dynamically added row to checked based on the group’s checkbox checked value, you should first check the status of the "AutoInclude all in Group" checkbox (groupCheckBox.checked) and then use that value to set the "checked" attribute of the dynamically created checkbox.

It seems you are already trying to do this in the code, but there is a small issue in how you are setting the "checked" attribute of the dynamically created checkbox. In HTML, to make a checkbox checked, you simply add the checked attribute without any value. In your provided code, you are using checked=’" + groupCheckBox.checked + "’ which is not needed and might cause issues.

Let’s modify the relevant part of the code:

cell_autoInclude = row.insertCell(1);
// Set the checked attribute based on the groupCheckBox.checked value
cell_autoInclude.innerHTML = `
  <span style='display: block; text-align: center; padding-top: 0px;'>
    <label class='label' style='margin-left: 0px'>
      <input id='${groupName}-${userEmail}_checkbox' type='checkbox' ${groupCheckBox.checked ? 'checked' : ''} style='margin-left: 0px'>
    </label>
  </span>`;
//

By using the ternary operator ${groupCheckBox.checked ? ‘checked’ : ”}, we add the checked attribute to the checkbox when groupCheckBox.checked is true (checked), and we omit the attribute when groupCheckBox.checked is false (unchecked). This way, the dynamically created checkbox will be checked or unchecked based on the status of the "AutoInclude all in Group" checkbox.

With this modification, the dynamically created checkbox inside the dynamically added row should be correctly checked or unchecked depending on the state of the group’s checkbox.

Leave a comment