2c:null 2d:["$","title",null,{"children":"Custom Inputs Experiment | Tanya Shapiro | Observable"}] 32: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; } 34:T577,35:[] 30:{"id":"267c45448bc48f3d","slug":null,"title":"Custom Inputs Experiment","thumbnail":"84f8ba3ae33179a5cae055b64866ee1a94b1add31fed8f14cf0e322f856b9499","access_level":"public","create_time":"$D2023-12-06T20:04:40.705Z","update_time":"$D2023-12-08T04:10:07.312Z","view_time":null,"first_public_time":"$D2023-12-08T04:01:35.324Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"230f604926360997","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":"starter_2024"},"version":332,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fccfb83ec070004a","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":null}],"members":[{"type":"individual","id":"fccfb83ec070004a","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Custom Inputs Experiment","cells":[{"id":0,"value":"# Custom Inputs Experiment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof selectedTeams = createInput(teams, 25)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"selectedTeams","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"viewof radios = Inputs.checkbox(['A','B','C'], {label: \"Select one\", value: \"A\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"radios","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"viewof button = Inputs.button(\"Select All\", {onclick: ()=> viewof radios})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"radios.filter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function toggleDropdown() {\n document.getElementById(\"myDropdown\").classList.toggle(\"show\");\n displaySelectedOptions();\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"