Nest Checkbox (Select All)

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"a97fa974-395e-d10d-6dee-7c66b32348e0","type":"FormWrapper","tag":"div","classes":["ba459f26-60e2-a94b-285d-f32359172f01"],"children":["a97fa974-395e-d10d-6dee-7c66b32348e1","a06aca16-fb8e-92e8-5e12-4441adcc446e","a97fa974-395e-d10d-6dee-7c66b32348e9","a97fa974-395e-d10d-6dee-7c66b32348ec"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"a97fa974-395e-d10d-6dee-7c66b32348e1","type":"FormForm","tag":"form","classes":["29551fd1-a818-b6d0-d190-412c90d99490"],"children":["00657020-3e93-9300-7932-9e51168ed831","144342bd-1221-78c9-daf0-5cfccb1c92b6","b071f4a1-c02e-1f59-138f-c30a216ce651","e79c3719-8508-2765-73f2-5b66392dabc1","c388d1d7-3de7-53e1-1e50-7cb56422da54","7f27b566-35b7-cf67-edec-5d9053b57059"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"00657020-3e93-9300-7932-9e51168ed831","type":"Heading","tag":"h2","classes":["3fef432a-ab6f-ebf0-ea2b-b7c3ab28bdd9"],"children":["00657020-3e93-9300-7932-9e51168ed832"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h2"}},{"_id":"00657020-3e93-9300-7932-9e51168ed832","text":true,"v":"Select all (Checkbox)"},{"_id":"144342bd-1221-78c9-daf0-5cfccb1c92b6","type":"FormCheckboxWrapper","tag":"div","classes":["a54a7848-d18f-599b-50a0-17ee63f9c05e"],"children":["144342bd-1221-78c9-daf0-5cfccb1c92b7","144342bd-1221-78c9-daf0-5cfccb1c92b8"],"data":{"form":{"type":"checkbox"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"144342bd-1221-78c9-daf0-5cfccb1c92b7","type":"FormCheckboxInput","tag":"input","classes":["1131706b-ba40-ebc1-c179-928e7145b4bb"],"children":[],"data":{"form":{"type":"checkbox-input","name":"Select All"},"inputType":"default","xattr":[{"name":"data-parent-checkbox","value":"test"}],"attr":{"type":"checkbox","id":"Select-All","name":"Select-All","data-name":"Select All","checked":false,"required":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"144342bd-1221-78c9-daf0-5cfccb1c92b8","type":"FormInlineLabel","tag":"label","classes":["3e2429d1-8f72-64f6-802d-5aaea09f836c"],"children":["144342bd-1221-78c9-daf0-5cfccb1c92b9"],"data":{"form":{"type":"checkbox-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"144342bd-1221-78c9-daf0-5cfccb1c92b9","text":true,"v":"Select all"},{"_id":"b071f4a1-c02e-1f59-138f-c30a216ce651","type":"FormCheckboxWrapper","tag":"div","classes":["a54a7848-d18f-599b-50a0-17ee63f9c05e"],"children":["b071f4a1-c02e-1f59-138f-c30a216ce652","b071f4a1-c02e-1f59-138f-c30a216ce653"],"data":{"form":{"type":"checkbox"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"b071f4a1-c02e-1f59-138f-c30a216ce652","type":"FormCheckboxInput","tag":"input","classes":["1131706b-ba40-ebc1-c179-928e7145b4bb"],"children":[],"data":{"attr":{"type":"checkbox","id":"Framer","name":"Framer","data-name":"Framer","checked":false,"required":false},"xattr":[{"name":"data-checkbox","value":"test"}],"form":{"type":"checkbox-input","name":"Framer"},"inputType":"default","displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"b071f4a1-c02e-1f59-138f-c30a216ce653","type":"FormInlineLabel","tag":"label","classes":["3e2429d1-8f72-64f6-802d-5aaea09f836c"],"children":["b071f4a1-c02e-1f59-138f-c30a216ce654"],"data":{"form":{"type":"checkbox-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"b071f4a1-c02e-1f59-138f-c30a216ce654","text":true,"v":"Framer"},{"_id":"e79c3719-8508-2765-73f2-5b66392dabc1","type":"FormCheckboxWrapper","tag":"div","classes":["a54a7848-d18f-599b-50a0-17ee63f9c05e"],"children":["e79c3719-8508-2765-73f2-5b66392dabc2","e79c3719-8508-2765-73f2-5b66392dabc3"],"data":{"form":{"type":"checkbox"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"e79c3719-8508-2765-73f2-5b66392dabc2","type":"FormCheckboxInput","tag":"input","classes":["1131706b-ba40-ebc1-c179-928e7145b4bb"],"children":[],"data":{"attr":{"type":"checkbox","id":"Webflow","name":"Webflow","data-name":"Webflow","checked":false,"required":false},"xattr":[{"name":"data-checkbox","value":"test"}],"form":{"type":"checkbox-input","name":"Webflow"},"inputType":"default","displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e79c3719-8508-2765-73f2-5b66392dabc3","type":"FormInlineLabel","tag":"label","classes":["3e2429d1-8f72-64f6-802d-5aaea09f836c"],"children":["e79c3719-8508-2765-73f2-5b66392dabc4"],"data":{"form":{"type":"checkbox-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"e79c3719-8508-2765-73f2-5b66392dabc4","text":true,"v":"Webflow"},{"_id":"c388d1d7-3de7-53e1-1e50-7cb56422da54","type":"FormCheckboxWrapper","tag":"div","classes":["a54a7848-d18f-599b-50a0-17ee63f9c05e"],"children":["c388d1d7-3de7-53e1-1e50-7cb56422da55","c388d1d7-3de7-53e1-1e50-7cb56422da56"],"data":{"form":{"type":"checkbox"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"c388d1d7-3de7-53e1-1e50-7cb56422da55","type":"FormCheckboxInput","tag":"input","classes":["1131706b-ba40-ebc1-c179-928e7145b4bb"],"children":[],"data":{"attr":{"type":"checkbox","id":"Flowscriipt","name":"Flowscriipt","data-name":"Flowscriipt","checked":false,"required":false},"xattr":[{"name":"data-checkbox","value":"test"}],"form":{"type":"checkbox-input","name":"Flowscriipt"},"inputType":"default","displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"c388d1d7-3de7-53e1-1e50-7cb56422da56","type":"FormInlineLabel","tag":"label","classes":["3e2429d1-8f72-64f6-802d-5aaea09f836c"],"children":["c388d1d7-3de7-53e1-1e50-7cb56422da57"],"data":{"form":{"type":"checkbox-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"c388d1d7-3de7-53e1-1e50-7cb56422da57","text":true,"v":"Flowscriipt"},{"_id":"7f27b566-35b7-cf67-edec-5d9053b57059","type":"FormCheckboxWrapper","tag":"div","classes":["a54a7848-d18f-599b-50a0-17ee63f9c05e"],"children":["7f27b566-35b7-cf67-edec-5d9053b5705a","7f27b566-35b7-cf67-edec-5d9053b5705b"],"data":{"form":{"type":"checkbox"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"7f27b566-35b7-cf67-edec-5d9053b5705a","type":"FormCheckboxInput","tag":"input","classes":["1131706b-ba40-ebc1-c179-928e7145b4bb"],"children":[],"data":{"attr":{"type":"checkbox","id":"Wized","name":"Wized","data-name":"Wized","checked":false,"required":false},"xattr":[{"name":"data-checkbox","value":"test"}],"form":{"type":"checkbox-input","name":"Wized"},"inputType":"default","displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"7f27b566-35b7-cf67-edec-5d9053b5705b","type":"FormInlineLabel","tag":"label","classes":["3e2429d1-8f72-64f6-802d-5aaea09f836c"],"children":["7f27b566-35b7-cf67-edec-5d9053b5705c"],"data":{"form":{"type":"checkbox-label"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"7f27b566-35b7-cf67-edec-5d9053b5705c","text":true,"v":"Wized"},{"_id":"a06aca16-fb8e-92e8-5e12-4441adcc446e","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<!-- This works with Webfloiw Default Checkbox-->\n\n<script>\n    var parentCheckbox = document.querySelector('input[data-parent-checkbox]');\n    var childCheckboxes = document.querySelectorAll('input[data-checkbox]');\n\n    function updateParentCheckbox() {\n        var allChecked = true;\n        var atLeastOneChecked = false;\n\n        childCheckboxes.forEach(function (child) {\n            if (child.checked) {\n                atLeastOneChecked = true;\n            } else {\n                allChecked = false;\n            }\n        });\n\n        parentCheckbox.checked = allChecked;\n        parentCheckbox.indeterminate = atLeastOneChecked && !allChecked;\n    }\n\n    parentCheckbox.addEventListener('change', function () {\n        childCheckboxes.forEach(function (checkbox) {\n            checkbox.checked = parentCheckbox.checked;\n            checkbox.indeterminate = false;\n        });\n    });\n\n    childCheckboxes.forEach(function (checkbox) {\n        checkbox.addEventListener('change', function () {\n            updateParentCheckbox();\n        });\n\n        checkbox.addEventListener('keydown', function (event) {\n            if (event.key === 'Space' || event.key === 'Enter') {\n                checkbox.checked = !checkbox.checked;\n                updateParentCheckbox();\n                event.preventDefault();\n            }\n        });\n\n        checkbox.addEventListener('focus', function () {\n            checkbox.parentNode.classList.add('focused');\n        });\n\n        checkbox.addEventListener('blur', function () {\n            checkbox.parentNode.classList.remove('focused');\n        });\n    });\n</script>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<!-- This works with Webfloiw Default Checkbox-->\n\n<script>\n    var parentCheckbox = document.querySelector('input[data-parent-checkbox]');\n    var childCheckboxes = document.querySelectorAll('input[data-checkbox]');\n\n    function updateParentCheckbox() {\n        var allChecked = true;\n        var atLeastOneChecked = false;\n\n        childCheckboxes.forEach(function (child) {\n            if (child.checked) {\n                atLeastOneChecked = true;\n            } else {\n                allChecked = false;\n            }\n        });\n\n        parentCheckbox.checked = allChecked;\n        parentCheckbox.indeterminate = atLeastOneChecked && !allChecked;\n    }\n\n    parentCheckbox.addEventListener('change', function () {\n        childCheckboxes.forEach(function (checkbox) {\n            checkbox.checked = parentCheckbox.checked;\n            checkbox.indeterminate = false;\n        });\n    });\n\n    childCheckboxes.forEach(function (checkbox) {\n        checkbox.addEventListener('change', function () {\n            updateParentCheckbox();\n        });\n\n        checkbox.addEventListener('keydown', function (event) {\n            if (event.key === 'Space' || event.key === 'Enter') {\n                checkbox.checked = !checkbox.checked;\n                updateParentCheckbox();\n                event.preventDefault();\n            }\n        });\n\n        checkbox.addEventListener('focus', function () {\n            checkbox.parentNode.classList.add('focused');\n        });\n\n        checkbox.addEventListener('blur', function () {\n            checkbox.parentNode.classList.remove('focused');\n        });\n    });\n</script>","div":false,"iframe":false,"script":true,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"a97fa974-395e-d10d-6dee-7c66b32348e9","type":"FormSuccessMessage","tag":"div","classes":[],"children":["a97fa974-395e-d10d-6dee-7c66b32348ea"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"a97fa974-395e-d10d-6dee-7c66b32348ea","type":"Block","tag":"div","classes":[],"children":["a97fa974-395e-d10d-6dee-7c66b32348eb"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a97fa974-395e-d10d-6dee-7c66b32348eb","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"a97fa974-395e-d10d-6dee-7c66b32348ec","type":"FormErrorMessage","tag":"div","classes":[],"children":["a97fa974-395e-d10d-6dee-7c66b32348ed"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"a97fa974-395e-d10d-6dee-7c66b32348ed","type":"Block","tag":"div","classes":[],"children":["a97fa974-395e-d10d-6dee-7c66b32348ee"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a97fa974-395e-d10d-6dee-7c66b32348ee","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"ba459f26-60e2-a94b-285d-f32359172f01","fake":false,"type":"class","name":"checkbox-element","namespace":"","comb":"","styleLess":"display: flex; width: 100%; max-width: 40rem; margin-bottom: 0px; flex-direction: column; align-items: center;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"29551fd1-a818-b6d0-d190-412c90d99490","fake":false,"type":"class","name":"checkbox-parent","namespace":"","comb":"","styleLess":"display: flex; width: 100%; padding-top: 2rem; padding-right: 2rem; padding-bottom: 2rem; padding-left: 2rem; flex-direction: column; grid-column-gap: 1rem; grid-row-gap: 1rem; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; background-color: white; box-shadow: 0 1px 12px -3px hsla(216, 10.64%, 9.22%, 0.03);","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"3fef432a-ab6f-ebf0-ea2b-b7c3ab28bdd9","fake":false,"type":"class","name":"heading-style-h2 2","namespace":"","comb":"","styleLess":"font-size: 2.5rem; line-height: 1.2;","variants":{},"children":["2375d165-842e-766c-88fb-e0c6b977f7d3"],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"a54a7848-d18f-599b-50a0-17ee63f9c05e","fake":false,"type":"class","name":"checkbox-field","namespace":"","comb":"","styleLess":"display: flex; margin-bottom: 0px; padding-top: 0.75rem; padding-right: 1rem; padding-bottom: 0.75rem; padding-left: 1rem; align-items: center; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(215.9999999999998, 9.80%, 90.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(215.9999999999998, 9.80%, 90.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(215.9999999999998, 9.80%, 90.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(215.9999999999998, 9.80%, 90.00%, 1.00); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"1131706b-ba40-ebc1-c179-928e7145b4bb","fake":false,"type":"class","name":"checkbox-input","namespace":"","comb":"","styleLess":"width: 1rem; height: 1rem; margin-top: 0px; margin-right: 0.75rem; margin-left: 0px;","variants":{"main_redirected-checked":{"styleLess":"border-top-style: none; border-top-color: hsla(81.26582278481013, 96.34%, 67.84%, 1.00); border-right-style: none; border-right-color: hsla(81.26582278481013, 96.34%, 67.84%, 1.00); border-bottom-style: none; border-bottom-color: hsla(81.26582278481013, 96.34%, 67.84%, 1.00); border-left-style: none; border-left-color: hsla(81.26582278481013, 96.34%, 67.84%, 1.00); background-color: hsla(216, 10.64%, 9.22%, 1.00); background-image: @img_650edaa1ea23e1c17a470d80;"},"main_redirected-focus":{"styleLess":"border-top-color: hsla(216, 10.64%, 9.22%, 1.00); border-right-color: hsla(216, 10.64%, 9.22%, 1.00); border-bottom-color: hsla(216, 10.64%, 9.22%, 1.00); border-left-color: hsla(216, 10.64%, 9.22%, 1.00); box-shadow: none;"}},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"3e2429d1-8f72-64f6-802d-5aaea09f836c","fake":false,"type":"class","name":"checkbox-label 1","namespace":"","comb":"","styleLess":"width: 100%; margin-bottom: 0px;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null}],"assets":[{"cdnUrl":"https://assets-global.website-files.com/6493377f1a80e7fd23cf1812/650edaa1ea23e1c17a470d80_uil_check.svg","siteId":"6493377f1a80e7fd23cf1812","width":16,"isHD":false,"height":16,"fileName":"650edaa1ea23e1c17a470d80_uil_check.svg","createdOn":"2023-09-23T12:31:29.978Z","origFileName":"uil_check.svg","fileHash":"e87c3e0e1f94579c9651b6acf192ac68","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/6493377f1a80e7fd23cf1812/650edaa1ea23e1c17a470d80_uil_check.svg","thumbUrl":"https://assets-global.website-files.com/6493377f1a80e7fd23cf1812/650edaa1ea23e1c17a470d80_uil_check.svg","_id":"650edaa1ea23e1c17a470d80","updatedOn":"2023-09-23T12:31:29.978Z","fileSize":1151,"localizedSettings":{}}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}