Nest Checkbox (Select All)

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"f4518869-9d90-bd21-5c9a-71c50d6af449","type":"FormWrapper","tag":"div","classes":["ba459f26-60e2-a94b-285d-f32359172f01"],"children":["5b99751b-89d9-d3a6-6ba7-57dcc4f8a87e","8444f9a6-4e3c-8b04-02f0-b8e60988870f","5f6fb57c-d347-7971-5f3f-517452ef1649","e10cabc7-db35-af73-7078-bb0d670827a9"],"data":{"search":{"exclude":true},"form":{"type":"wrapper"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"5b99751b-89d9-d3a6-6ba7-57dcc4f8a87e","type":"FormForm","tag":"form","classes":["29551fd1-a818-b6d0-d190-412c90d99490"],"children":["56b3e6b2-cc52-0ddf-f113-7c26d6abe9b0","520292e3-f71a-a2ab-c537-e87c43d08d38","54283af8-4a1e-aff3-a6c9-fd6ceeb751a2","05afa707-05cc-91aa-1544-808505d489ef","f4e4b7b3-24c2-86fd-4a78-262ef099c1f1","688004e4-accc-22b0-4afb-e53feeac9687"],"data":{"Source":{"tag":"Default form","val":{}},"form":{"type":"form","name":"Email Form"},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"56b3e6b2-cc52-0ddf-f113-7c26d6abe9b0","type":"Heading","tag":"h2","classes":["3fef432a-ab6f-ebf0-ea2b-b7c3ab28bdd9"],"children":["92b896da-7c5a-c618-dc6e-d70dcc12b702"],"data":{"tag":"h2","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"92b896da-7c5a-c618-dc6e-d70dcc12b702","text":true,"v":"Select all (Checkbox)"},{"_id":"520292e3-f71a-a2ab-c537-e87c43d08d38","type":"FormCheckboxWrapper","tag":"div","classes":["a54a7848-d18f-599b-50a0-17ee63f9c05e"],"children":["07a5995b-a798-12bc-cb12-3501f23718f5","41f90550-9395-ba3b-4cba-662bbe4172b6"],"data":{"form":{"type":"checkbox"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"07a5995b-a798-12bc-cb12-3501f23718f5","type":"FormCheckboxInput","tag":"input","classes":["1131706b-ba40-ebc1-c179-928e7145b4bb"],"children":[],"data":{"form":{"type":"checkbox-input","name":"Select All"},"inputType":"custom","attr":{"type":"checkbox","name":"Select-All","id":"Select-All","data-name":"Select All","required":false,"checked":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"data-parent-checkbox","value":"test"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"41f90550-9395-ba3b-4cba-662bbe4172b6","type":"FormInlineLabel","tag":"label","classes":["3e2429d1-8f72-64f6-802d-5aaea09f836c"],"children":["df4faf03-1544-845d-470e-f5171364ff5f"],"data":{"form":{"type":"checkbox-label"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"df4faf03-1544-845d-470e-f5171364ff5f","text":true,"v":"Select all"},{"_id":"54283af8-4a1e-aff3-a6c9-fd6ceeb751a2","type":"FormCheckboxWrapper","tag":"div","classes":["a54a7848-d18f-599b-50a0-17ee63f9c05e"],"children":["f7582ba8-81dd-c17f-e12f-547e19b377a4","7476e717-c5bb-27a1-c22c-45f877a21609"],"data":{"form":{"type":"checkbox"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"f7582ba8-81dd-c17f-e12f-547e19b377a4","type":"FormCheckboxInput","tag":"input","classes":["1131706b-ba40-ebc1-c179-928e7145b4bb"],"children":[],"data":{"form":{"type":"checkbox-input","name":"Framer"},"inputType":"custom","attr":{"type":"checkbox","name":"Framer","id":"Framer","data-name":"Framer","required":false,"checked":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"data-checkbox","value":"test"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7476e717-c5bb-27a1-c22c-45f877a21609","type":"FormInlineLabel","tag":"label","classes":["3e2429d1-8f72-64f6-802d-5aaea09f836c"],"children":["a7044d80-c017-d269-0668-08a61ed8b75f"],"data":{"form":{"type":"checkbox-label"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"a7044d80-c017-d269-0668-08a61ed8b75f","text":true,"v":"Framer"},{"_id":"05afa707-05cc-91aa-1544-808505d489ef","type":"FormCheckboxWrapper","tag":"div","classes":["a54a7848-d18f-599b-50a0-17ee63f9c05e"],"children":["714ee4e8-ea00-0700-075b-817efbd61467","d2bfdf9b-46a6-9558-e266-4b079e54be5c"],"data":{"form":{"type":"checkbox"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"714ee4e8-ea00-0700-075b-817efbd61467","type":"FormCheckboxInput","tag":"input","classes":["1131706b-ba40-ebc1-c179-928e7145b4bb"],"children":[],"data":{"form":{"type":"checkbox-input","name":"Webflow"},"inputType":"custom","attr":{"type":"checkbox","name":"Webflow","id":"Webflow","data-name":"Webflow","required":false,"checked":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"data-checkbox","value":"test"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d2bfdf9b-46a6-9558-e266-4b079e54be5c","type":"FormInlineLabel","tag":"label","classes":["3e2429d1-8f72-64f6-802d-5aaea09f836c"],"children":["d74a07bb-a474-845b-4be2-49bfbd226061"],"data":{"form":{"type":"checkbox-label"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d74a07bb-a474-845b-4be2-49bfbd226061","text":true,"v":"Webflow"},{"_id":"f4e4b7b3-24c2-86fd-4a78-262ef099c1f1","type":"FormCheckboxWrapper","tag":"div","classes":["a54a7848-d18f-599b-50a0-17ee63f9c05e"],"children":["342ab1b2-1cf3-f55d-49c8-5a9d64b4f68f","6eb0704b-594f-cc95-e3ee-1225c075121e"],"data":{"form":{"type":"checkbox"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"342ab1b2-1cf3-f55d-49c8-5a9d64b4f68f","type":"FormCheckboxInput","tag":"input","classes":["1131706b-ba40-ebc1-c179-928e7145b4bb"],"children":[],"data":{"form":{"type":"checkbox-input","name":"Flowscriipt"},"inputType":"custom","attr":{"type":"checkbox","name":"Flowscriipt","id":"Flowscriipt","data-name":"Flowscriipt","required":false,"checked":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"data-checkbox","value":"test"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6eb0704b-594f-cc95-e3ee-1225c075121e","type":"FormInlineLabel","tag":"label","classes":["3e2429d1-8f72-64f6-802d-5aaea09f836c"],"children":["3179d400-5943-adca-5f17-c0183652c19c"],"data":{"form":{"type":"checkbox-label"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"3179d400-5943-adca-5f17-c0183652c19c","text":true,"v":"Flowscriipt"},{"_id":"688004e4-accc-22b0-4afb-e53feeac9687","type":"FormCheckboxWrapper","tag":"div","classes":["a54a7848-d18f-599b-50a0-17ee63f9c05e"],"children":["6b42b856-2467-4d2d-ae5e-387a4820a6d6","90ff839a-8b20-966a-04a9-bf586919a7e5"],"data":{"form":{"type":"checkbox"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"6b42b856-2467-4d2d-ae5e-387a4820a6d6","type":"FormCheckboxInput","tag":"input","classes":["1131706b-ba40-ebc1-c179-928e7145b4bb"],"children":[],"data":{"form":{"type":"checkbox-input","name":"Wized"},"inputType":"custom","attr":{"type":"checkbox","name":"Wized","id":"Wized","data-name":"Wized","required":false,"checked":false},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"data-checkbox","value":"test"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"90ff839a-8b20-966a-04a9-bf586919a7e5","type":"FormInlineLabel","tag":"label","classes":["3e2429d1-8f72-64f6-802d-5aaea09f836c"],"children":["0afc80ad-8123-a417-93e8-66c53e633b38"],"data":{"form":{"type":"checkbox-label"},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0afc80ad-8123-a417-93e8-66c53e633b38","text":true,"v":"Wized"},{"_id":"8444f9a6-4e3c-8b04-02f0-b8e60988870f","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<script>\n    var parentCheckboxes = document.querySelectorAll('input[data-parent-checkbox]');\n    var childCheckboxes = document.querySelectorAll('input[data-checkbox]');\n\n    function updateCustomCheckboxes() {\n        childCheckboxes.forEach(function (checkbox) {\n            var customDiv = checkbox.previousElementSibling;\n            if (checkbox.checked) {\n                customDiv.classList.add('w--redirected-checked');\n            } else {\n                customDiv.classList.remove('w--redirected-checked');\n            }\n        });\n    }\n\n    parentCheckboxes.forEach(function (parentCheckbox) {\n        parentCheckbox.addEventListener('change', function () {\n            var subset = parentCheckbox.getAttribute('data-parent-checkbox');\n            var childCheckboxesInSubset = document.querySelectorAll(`input[data-checkbox~=\"${subset}\"]`);\n\n            childCheckboxesInSubset.forEach(function (checkbox) {\n                checkbox.checked = parentCheckbox.checked;\n                checkbox.indeterminate = false;\n            });\n\n            // Only update custom checkboxes if a parent checkbox is checked/unchecked\n            if (parentCheckbox.checked) {\n                updateCustomCheckboxes();\n            } else {\n                childCheckboxesInSubset.forEach(function (checkbox) {\n                    var customDiv = checkbox.previousElementSibling;\n                    customDiv.classList.remove('w--redirected-checked');\n                });\n            }\n        });\n    });\n\n    childCheckboxes.forEach(function (checkbox) {\n        var customDiv = checkbox.previousElementSibling;\n\n        checkbox.addEventListener('change', function () {\n            // Do not call updateCustomCheckboxes() here to maintain normal behavior\n        });\n\n        checkbox.addEventListener('keydown', function (event) {\n            if (event.key === 'Space' || event.key === 'Enter') {\n                checkbox.checked = !checkbox.checked;\n                checkbox.dispatchEvent(new Event('change'));\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":{"search":{"exclude":true},"embed":{"meta":{"html":"<script>\n    var parentCheckboxes = document.querySelectorAll('input[data-parent-checkbox]');\n    var childCheckboxes = document.querySelectorAll('input[data-checkbox]');\n\n    function updateCustomCheckboxes() {\n        childCheckboxes.forEach(function (checkbox) {\n            var customDiv = checkbox.previousElementSibling;\n            if (checkbox.checked) {\n                customDiv.classList.add('w--redirected-checked');\n            } else {\n                customDiv.classList.remove('w--redirected-checked');\n            }\n        });\n    }\n\n    parentCheckboxes.forEach(function (parentCheckbox) {\n        parentCheckbox.addEventListener('change', function () {\n            var subset = parentCheckbox.getAttribute('data-parent-checkbox');\n            var childCheckboxesInSubset = document.querySelectorAll(`input[data-checkbox~=\"${subset}\"]`);\n\n            childCheckboxesInSubset.forEach(function (checkbox) {\n                checkbox.checked = parentCheckbox.checked;\n                checkbox.indeterminate = false;\n            });\n\n            // Only update custom checkboxes if a parent checkbox is checked/unchecked\n            if (parentCheckbox.checked) {\n                updateCustomCheckboxes();\n            } else {\n                childCheckboxesInSubset.forEach(function (checkbox) {\n                    var customDiv = checkbox.previousElementSibling;\n                    customDiv.classList.remove('w--redirected-checked');\n                });\n            }\n        });\n    });\n\n    childCheckboxes.forEach(function (checkbox) {\n        var customDiv = checkbox.previousElementSibling;\n\n        checkbox.addEventListener('change', function () {\n            // Do not call updateCustomCheckboxes() here to maintain normal behavior\n        });\n\n        checkbox.addEventListener('keydown', function (event) {\n            if (event.key === 'Space' || event.key === 'Enter') {\n                checkbox.checked = !checkbox.checked;\n                checkbox.dispatchEvent(new Event('change'));\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,"script":true,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"5f6fb57c-d347-7971-5f3f-517452ef1649","type":"FormSuccessMessage","tag":"div","classes":[],"children":["66c15594-30e2-7721-02de-d678806c0866"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-done"}}},{"_id":"66c15594-30e2-7721-02de-d678806c0866","type":"Block","tag":"div","classes":[],"children":["4002b53b-6815-d7ea-b88b-6b1e5670c86d"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"4002b53b-6815-d7ea-b88b-6b1e5670c86d","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"e10cabc7-db35-af73-7078-bb0d670827a9","type":"FormErrorMessage","tag":"div","classes":[],"children":["6f7ee9d7-beb5-a66b-7e68-2f490cfb80b4"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"msg-fail"}}},{"_id":"6f7ee9d7-beb5-a66b-7e68-2f490cfb80b4","type":"Block","tag":"div","classes":[],"children":["30a114ee-34bb-6d27-e524-5f5eafd56bd8"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"30a114ee-34bb-6d27-e524-5f5eafd56bd8","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","origin":null,"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","origin":null,"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","origin":null,"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: #e3e5e8; border-right-style: solid; border-right-width: 1px; border-right-color: #e3e5e8; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #e3e5e8; border-left-style: solid; border-left-width: 1px; border-left-color: #e3e5e8; 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","origin":null,"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: #c4fc5e; border-right-style: none; border-right-color: #c4fc5e; border-bottom-style: none; border-bottom-color: #c4fc5e; border-left-style: none; border-left-color: #c4fc5e; background-color: #15171a; background-image: @img_650edaa1ea23e1c17a470d80;"},"main_redirected-focus":{"styleLess":"border-top-color: #15171a; border-right-color: #15171a; border-bottom-color: #15171a; border-left-color: #15171a; box-shadow: none;"}},"children":[],"createdBy":"61f476eebc83e27188ab6890","origin":null,"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":["81d7a806-42e3-4b87-faff-57d62513bcf2"],"createdBy":"61f476eebc83e27188ab6890","origin":null,"selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.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","translationLoading":false,"variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/6493377f1a80e7fd23cf1812/650edaa1ea23e1c17a470d80_uil_check.svg","thumbUrl":"https://cdn.prod.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":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}