在现代 Web 开发中，盒子风格（box style）被广泛应用于 UI 设计中，以突出元素之间的边界并增强可读性。而 Material Design 提供的 CheckBox 控件正是最适合表达这种风格的。
CheckBox 的基本用法
在 Material Design 中，CheckBox 控件用于表示一些二元选择（binary choice）的状态。例如，选中/未选中、同意/不同意等。
在 HTML 中使用 CheckBox 控件非常简单。我们只需要添加一个 input 标签，并设置 type 属性为 checkbox，在需要的时候添加 checked 属性即可：
<input type="checkbox" id="my-checkbox" checked> <label for="my-checkbox">我已阅读并同意用户协议</label>
以上代码将生成一个默认选中状态的 CheckBox 控件，并和一个文本标签相关联。当用户点击文本标签时，CheckBox 状态会随之改变。
如果我们需要在 JavaScript 中读取或修改 CheckBox 的状态，只需要使用这个标签的 checked 属性就可以了。例如：
const checkbox = document.querySelector('input[type="checkbox"]');
if (checkbox.checked) {
console.log('该项目已完成。');
} else {
console.log('该项目尚未完成。');
}CheckBox 的高级用法
除了基本的用法之外，CheckBox 在 Material Design 中还提供了一些高级功能。下面我们来逐一了解。
CheckBox 的三种状态
在一些场合下，我们需要表示三种状态（tristate）而非只有两种。例如，一个任务可以是未开始、进行中、已完成三种状态中的一种。在这种情况下，我们可以使用 Material Design 中提供的 mdc-checkbox--indeterminate 类。
下面是一个示例代码：
<input type="checkbox" id="my-checkbox" class="mdc-checkbox--indeterminate"> <label for="my-checkbox">进行中</label>
当 CheckBox 被添加了 mdc-checkbox--indeterminate 类时，它的状态将变成中间态（indeterminate）。此时，我们可以通过 JavaScript 来修改该状态，例如：
const checkbox = document.querySelector('input[type="checkbox"]');
checkbox.indeterminate = true; // 中间态
checkbox.checked = false; // 未选中状态
checkbox.checked = true; // 选中状态CheckBox 和 Material Design 的色彩系统
Material Design 提供了一个完整的色彩系统，用于展示屏幕上可感知（perceptible）的不同元素。如果我们想要让 CheckBox 与我们的网站或应用的颜色主题相符，我们可以使用 Material Design 中提供的 mdc-checkbox--primary 或 mdc-checkbox--secondary 类。
例如，如果我们想让 CheckBox 与一个蓝色的按钮相符，可以这样写：
<input type="checkbox" id="my-checkbox" class="mdc-checkbox--primary"> <label for="my-checkbox">同意</label>
同理，如果我们想让 CheckBox 与一个黄色的图标相符，可以写成这样：
<input type="checkbox" id="my-checkbox" class="mdc-checkbox--secondary"> <label for="my-checkbox">同意</label>
CheckBox 和可访问性（Accessibility）
在 Web 开发中，我们不仅需要关注代码的正确性和性能，还需要关注可访问性（accessibility）问题。换言之，我们需要确保我们编写的代码对于一些有视觉障碍的用户也能够友好地工作。
在 Material Design 中，我们可以使用 <label> 元素的 for 属性，将其与其对应的 <input> 元素关联起来。这样，当屏幕阅读器读出这个控件时，它将会自动读出文本标签，提供更好的辅助信息。
同时，我们也应该为 CheckBox 添加一些提示信息，以提醒用户应当如何与该控件交互。例如，我们可以添加 title 属性或 aria-label 属性来实现这个目标：
<input type="checkbox" id="my-checkbox" title="请打勾以同意本协议"> <label for="my-checkbox">我已阅读并同意用户协议</label>
<input type="checkbox" id="my-checkbox" aria-label="同意用户协议"> <label for="my-checkbox">我已阅读并同意用户协议</label>
结论
通过结合示例代码和实际场景，我们详细地讲述了 Material Design 中 CheckBox 控件的基本用法和高级用法。同时，我们也强调了可访问性对于 CheckBox 控件的重要性，并提供了一些实用的提示和建议。希望它们能够帮助你更好地运用 Material Design 风格和技术，实现更出色的网站和应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6771805a6d66e0f9aaced132