<!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>
