在 Material Design 的设计语言中，复选框和单选框按钮是常见的 UI 元素，其简洁明了的设计风格在现代化的 web 应用程序中广泛使用。为了更好地设计和实现这些按钮，我们可以使用一些相关的 HTML 和 CSS 技术来构建它们。
在 HTML 中，我们可以使用 input 元素来创建复选框和单选框按钮。它们使用相同的 type 属性，但其 input 元素的 value 属性不同。例如，一个复选框按钮可以是这样的：
<input type="checkbox" id="myCheckbox" name="myCheckbox" value="1"> <label for="myCheckbox">复选框</label>
与此相似，一个单选框按钮可以如下所示：
<input type="radio" id="myRadio" name="myRadio" value="1"> <label for="myRadio">单选框</label>
这些代码中的标签 for 属性和 input 元素中的 id 属性相匹配，是为了让浏览器将标签与相应的输入元素关联起来，使其能够正确地响应用户的操作。
接下来，我们将使用 CSS 来实现按钮的样式。为了获得 Material Design 风格，我们可以使用 Google 提供的 Material Design Lite 库中的默认样式。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css">
现在我们可以使用 CSS 来为我们的复选框和单选框添加样式。
-- -------------------- ---- ------- -- ----- -- ------------- - -------- ------------- ------------- ----- - -- ----- -- ---------- - -------- ------------- ------------- ----- -展开代码
最后，为了使按钮响应用户操作，我们需要添加一些 JavaScript 代码。我们可以使用 JQuery 来帮助我们实现这个过程。
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
在 HTML 中，我们给 input 元素添加一个 class，并使用以下 JavaScript 代码来处理按钮的点击事件：
$('.mdl-checkbox').on('click', function() { $(this).toggleClass('is-checked'); }); $('.mdl-radio').on('click', function() { $('.mdl-radio').removeClass('is-checked'); $(this).addClass('is-checked'); });
以上代码中，我们为每个复选框和单选框按钮添加了一个点击事件，并在按钮被点击时切换它们的选中状态。对于单选框按钮，我们需要确保只有一个按钮被选择，因此在选中一个按钮时，我们需要移除其他所有按钮的选中状态。
现在，我们成功地使用 HTML、CSS 和 JavaScript 构建了 Material Design 风格的复选框和单选框按钮。完整的代码示例如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------- ------ --------------- ----- ---------------- ------------------------------------------------------------------------------------------------------ ------- -- ----- -- ------------- - -------- ------------- ------------- ----- - -- ----- -- ---------- - -------- ------------- ------------- ----- - -------- ------- ------ ------------ ------ ------------ ------------ ------ --------------------- ------ --------------- --------------------------- -------------- ---------------- --------- -- ----- ------------------------------- -------- -------- ------ --------------------- ------ --------------- --------------------------- -------------- ---------------- --------- -- ----- ------------------------------- -------- -------- ------------ ------ ------------------ ------ ------------ ------------------------ ----------- ------------ --------- -- ----- ---------------------------- -------- -------- ------ ------------------ ------ ------------ ------------------------ ----------- ------------ --------- -- ----- ---------------------------- -------- -------- ------- ----------------------------------------------------------- -------- ------------------------------ ---------- - ---------------------------------- --- --------------------------- ---------- - ------------------------------------------ ------------------------------- --- --------- ------- -------展开代码
使用以上代码可以实现 Material Design 下复选框和单选框按钮，为 Web 开发和设计带来了更多样化和更好的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b6c7ef306f20b3a6309e61
