| <!DOCTYPE html> |
| <!-- |
| @WAIT-FOR:Ready |
| @EXECUTE-AND-WAIT-FOR:checkFirstCheckbox() |
| @EXECUTE-AND-WAIT-FOR:uncheckFirstCheckbox() |
| @EXECUTE-AND-WAIT-FOR:setCheckboxIndeterminate() |
| @AURALINUX-ALLOW:indeterminate* |
| @AURALINUX-ALLOW:required* |
| @BLINK-ALLOW:htmlTag* |
| @BLINK-ALLOW:className* |
| --> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Material Web Checkboxes</title> |
| <script type="module"> |
| import { injectImportMap, loadAndWaitForReady } from "./resources/utils.js"; |
| injectImportMap(); |
| |
| const components = [ |
| "md-checkbox" |
| ]; |
| |
| loadAndWaitForReady(components, () => { |
| const statusDiv = document.getElementById("status"); |
| const checkboxes = [ |
| { text: "Unchecked checkbox" }, |
| { text: "Checked checkbox", checked: true }, |
| { text: "Indeterminate checkbox", indeterminate: true }, |
| { text: "Disabled checkbox", disabled: true }, |
| { text: "Disabled checked checkbox", disabled: true, checked: true }, |
| { text: "Required checkbox", required: true } |
| ]; |
| checkboxes.forEach(checkboxInfo => { |
| const checkbox = document.createElement("md-checkbox"); |
| checkbox.textContent = checkboxInfo.text; |
| if (checkboxInfo.checked) { |
| checkbox.checked = true; |
| } |
| if (checkboxInfo.indeterminate) { |
| checkbox.indeterminate = true; |
| } |
| if (checkboxInfo.disabled) { |
| checkbox.disabled = true; |
| } |
| if (checkboxInfo.required) { |
| checkbox.required = true; |
| } |
| statusDiv.appendChild(checkbox); |
| }); |
| statusDiv.setAttribute("aria-label", "Ready"); |
| }); |
| </script> |
| <script> |
| async function checkFirstCheckbox() { |
| const checkbox = document.querySelector("md-checkbox"); |
| if (checkbox) { |
| checkbox.checked = true; |
| const statusDiv = document.getElementById("status"); |
| const statusText = document.createElement("div"); |
| statusText.textContent = "Checkbox 1 Checked"; |
| statusDiv.appendChild(statusText); |
| return "Checkbox 1 Checked"; |
| } |
| return "Failed to check Checkbox 1"; |
| } |
| |
| async function uncheckFirstCheckbox() { |
| const checkbox = document.querySelector("md-checkbox"); |
| if (checkbox) { |
| checkbox.checked = false; |
| const statusDiv = document.getElementById("status"); |
| const statusText = document.createElement("div"); |
| statusText.textContent = "Checkbox 1 Unchecked"; |
| statusDiv.appendChild(statusText); |
| return "Checkbox 1 Unchecked"; |
| } |
| return "Failed to uncheck Checkbox 1"; |
| } |
| |
| async function setCheckboxIndeterminate() { |
| const checkbox = document.querySelector("md-checkbox"); |
| if (checkbox) { |
| checkbox.indeterminate = true; |
| const statusDiv = document.getElementById("status"); |
| const statusText = document.createElement("div"); |
| statusText.textContent = "Checkbox 1 Indeterminate"; |
| statusDiv.appendChild(statusText); |
| return "Checkbox 1 Indeterminate"; |
| } |
| return "Failed to set Checkbox 1 indeterminate"; |
| } |
| </script> |
| </head> |
| <body> |
| <div id="status" aria-label="Loading"> |
| </div> |
| </body> |
| </html> |
