2f:T71f,function createImageList(data, height) { const form = html`

`; const buttons = html`

`; form.appendChild(buttons); data.forEach(item => { const checkbox = html`

`; const buttons = html`

`; form.appendChild(buttons); data.forEach(item => { const checkbox = html`

${item.label} `; form.appendChild(checkbox); }); const inputChangeHandler = () => { const checkboxes = form.querySelectorAll('input[type="checkbox"]'); const selectedValues = Array.from(checkboxes) .filter(checkbox => checkbox.checked) .map(checkbox => checkbox.value); form.value = selectedValues; console.log(selectedValues) }; // Add event listener for checkbox changes using event delegation form.addEventListener('change', event => { if (event.target.matches('input[type="checkbox"]')) { inputChangeHandler(); } }); const selectAllBtn = buttons.querySelector('#selectAllBtn'); selectAllBtn.addEventListener('click', () => { const checkboxes = form.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(checkbox => { checkbox.checked = true; }); inputChangeHandler(); }); const clearAllBtn = buttons.querySelector('#clearAllBtn'); clearAllBtn.addEventListener('click', () => { const checkboxes = form.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(checkbox => { checkbox.checked = false; }); inputChangeHandler(); }); // Initialize form value initially inputChangeHandler(); return form; } 31:T577,32:[] 2d:{"title":"Custom Inputs Experiment","cells":[{"id":0,"value":"# Custom Inputs Experiment","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"teams = [{value: 'ATL', label:'Hawks', img:'https://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/ATL.png'},\n {value: 'DEN', label:'Nuggets', img:'https://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/DEN.png'},\n {value: 'BOS', label: 'Celtics', img:'https://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/BOS.png'},\n {value: 'LAC', label: 'Clippers', img:'https://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/LAC.png'},\n {value: 'GSW', label: 'Warriors', img:'https://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/GSW.png'}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"viewof selectedTeams = createInput(teams, 25)","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"selectedTeams","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"viewof radios = Inputs.checkbox(['A','B','C'], {label: \"Select one\", value: \"A\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"radios","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"viewof button = Inputs.button(\"Select All\", {onclick: ()=> viewof radios})","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"radios.filter","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"function toggleDropdown() {\n document.getElementById(\"myDropdown\").classList.toggle(\"show\");\n displaySelectedOptions();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"function displaySelectedOptions() {\n let selectedOptions = [];\n let checkboxes = document.querySelectorAll('#myDropdown input[type=\"checkbox\"]');\n checkboxes.forEach(checkbox => {\n if (checkbox.checked) {\n let label = checkbox.parentElement;\n let teamName = label.querySelector('.option').textContent.trim();\n let teamLogo = label.querySelector('img').outerHTML;\n selectedOptions.push(teamLogo + teamName);\n }\n });\n\n let button = document.querySelector('.dropbtn');\n if (selectedOptions.length > 0) {\n button.innerHTML = selectedOptions.join(', ');\n } else {\n button.textContent = 'Select teams...';\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}