Toggle navigation
WebEdit
New page
Samples
Login
Copy of 'Part 1: Custom Checkbox Widget with keyboard support'
Save
Show
Copy
Unsaved changes!
Settings
Hide
Title
Title
Description
Description
Web Key
Slug
Public
Last updated: April 20, 2024, 10:48 a.m.
HTML Head
HTML Body
<h1>Part 1: Custom Checkbox Widget with keyboard support</h1> <fieldset> <legend> Pizza Toppings </legend> <label> <input type="checkbox"> Green pepper </label> <label> <input type="checkbox"> Onion </label> <div class="checkbox" tabindex="0" onclick="clickCheckbox(event)" onkeydown="keydownCheckbox(event)"/> <span></span> Mushrooms </div> <div class="checkbox" tabindex="0" onclick="clickCheckbox(event)" onkeydown="keydownCheckbox(event)"/> <span></span> Spinach </div> </fieldset>
CSS
fieldset { border-color: #EEE; width: 10em; } fieldset legend { font-size: 100%; } label, div.checkbox { padding: 2px; width: 10em; display: block; margin-top: 0.25em; margin-bottom: 0.25em; } label input { margin-right: 0.5em; } div.checkbox span { padding: 0.25em; } div.checkbox span:before { content: '✗'; color: red; padding-right: 0.125em; } div.checkbox.checked span:before { content: '✓'; color: green; padding-right: 0.190em; }
JavaScript
function toggleCheckbox(node) { if (node.classList.contains('checked')) { node.classList.remove('checked'); } else { node.classList.add('checked'); } } function clickCheckbox(event) { var cb = event.currentTarget; toggleCheckbox(cb); event.stopPropagation(); event.preventDefault(); } function keydownCheckbox(event) { var cb = event.currentTarget; if (event.key === ' ') { toggleCheckbox(cb); event.stopPropagation(); event.preventDefault(); } }