#5

testTaskGate.ps1

@@ -268,37 +268,45 @@ function Build-Checkboxes {
       Where-Object Page -EQ $Page |
       Where-Object Column -EQ $Column |
       ForEach-Object {
-        $html = "<label><input type='checkbox' id='$($_.Id)' name='$($_.Name)' data-column='$Column'> $($_.Label)</label>"
+        $taskId = $_.Id
+        $html = "<label><input type='checkbox' id='$taskId' name='$($_.Name)' data-column='$Column'> $($_.Label)</label>"
 
         if ($_.SubOptions) {
-          Write-Host "👉 Rendering SubOptions for task $($_.Id)"
+          Write-Host "👉 Rendering SubOptions for task $taskId"
 
+          # Build the sub-checkboxes
           $subHtml = (
             $_.SubOptions | ForEach-Object {
               "<label style='margin-left:20px; display:block;'>
-                 <input type='checkbox' name='$($_.Value)' value='$($_.Value)'> $($_.Label)
+                 <input type='checkbox' class='sub-option-$taskId' name='$($_.Value)' value='$($_.Value)'> $($_.Label)
                </label>"
             }
           ) -join "`n"
 
+          # Append HTML + inline script
           $html += @"
-<div id='${($_.Id)}OptionsContainer' style='display:none; margin-top:4px;'>
+<div id='${taskId}OptionsContainer' style='display:none; margin-top:4px;'>
 $subHtml
 </div>
 <script>
   document.addEventListener('DOMContentLoaded', function () {
-    const masterCheckbox = document.getElementById('${($_.Id)}');
-    const container = document.getElementById('${($_.Id)}OptionsContainer');
-    if (masterCheckbox && container) {
-      const subCheckboxes = container.querySelectorAll('input[type="checkbox"]');
-      masterCheckbox.addEventListener('change', function () {
-        container.style.display = this.checked ? 'block' : 'none';
-        subCheckboxes.forEach(cb => cb.checked = this.checked);
-      });
-      if (masterCheckbox.checked) {
-        container.style.display = 'block';
-        subCheckboxes.forEach(cb => cb.checked = true);
-      }
+    const master = document.getElementById('$taskId');
+    const container = document.getElementById('${taskId}OptionsContainer');
+    const subCheckboxes = container.querySelectorAll('.sub-option-$taskId');
+
+    if (master && container) {
+      // Toggle visibility + check state
+      const toggleSubs = () => {
+        const show = master.checked;
+        container.style.display = show ? 'block' : 'none';
+        subCheckboxes.forEach(cb => cb.checked = show);
+      };
+
+      // Bind event
+      master.addEventListener('change', toggleSubs);
+
+      // Handle page load if pre-checked
+      if (master.checked) toggleSubs();
     }
   });
 </script>
@@ -313,6 +321,7 @@ $subHtml
 
 
 
+
 function Get-UIHtml {
     param([string]$Page = 'onboard')