使用 Materialize CSS 框架中的 Form Checkboxes

class Checkboxes

Checkboxes 是表单元素中常用的组件，允许用户从多个选项中选择一个或多个。Materialize CSS 提供了一种简洁而美观的方式来实现复选框，使得开发者可以快速构建用户友好的表单界面。本文将详细介绍如何在 Materialize CSS 中使用 Checkboxes，包括使用方法、属性、方法，以及与其他组件的结合使用示例。

1. 什么是 Checkboxes？

Checkboxes 是一种允许用户在一组选项中进行多重选择的输入控件。在用户界面中，Checkboxes 通常以方形框的形式出现，用户可以通过单击方框来选择或取消选择某个选项。

2. 引入 Materialize CSS

在使用 Checkboxes 之前，需要确保在 HTML 文件中引入 Materialize CSS 的样式和 JavaScript 文件。

2.1 引入 CDN 资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Materialize Checkboxes 示例</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>

    <!-- 页面内容 -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>

3. 基本用法

3.1 创建基本的 Checkbox 组件

在 Materialize CSS 中创建 Checkboxes 非常简单，只需使用 <input> 标签，并设置 type 为 checkbox。以下是一个基本的示例：

<div class="container">
    <h1 class="header">Checkboxes 示例</h1>
    <form>
        <p>
            <label>
                <input type="checkbox" class="filled-in" />
                <span>选项 1</span>
            </label>
        </p>
        <p>
            <label>
                <input type="checkbox" class="filled-in" />
                <span>选项 2</span>
            </label>
        </p>
        <p>
            <label>
                <input type="checkbox" class="filled-in" />
                <span>选项 3</span>
            </label>
        </p>
        <a class="waves-effect waves-light btn" id="submit-btn">提交</a>
    </form>
</div>

3.2 代码详解

  1. HTML 部分：

    • 创建一个包含多个复选框的表单，每个复选框用 <input> 标签表示，type 属性设置为 checkbox。
    • 使用 class="filled-in" 来改变复选框的外观，使其更符合 Material Design 风格。
    • 使用 <label> 标签来为复选框添加文本描述，便于用户理解。

  2. 按钮：

    • 添加一个提交按钮，用于触发提交操作。

4. 处理 Checkbox 的状态

在实际应用中，我们需要能够获取用户选择的复选框状态。下面的示例展示了如何通过 JavaScript 来处理复选框的选中状态。

<script>
    $(document).ready(function() {
        $('#submit-btn').click(function() {
            var selectedOptions = [];
            $('input[type=checkbox]:checked').each(function() {
                selectedOptions.push($(this).siblings('span').text());
            });
            alert("您选择的选项: " + selectedOptions.join(", "));
        });
    });
</script>

4.1 代码详解

  1. 选择选中的复选框：

    • 使用 $('input[type=checkbox]:checked') 选择所有被选中的复选框。

  2. 获取选项文本：

    • 对于每个选中的复选框，使用 siblings('span').text() 获取对应的文本。

  3. 显示选择结果：

    • 使用 alert 来显示用户选择的选项。

5. 自定义 Checkbox 样式

Materialize CSS 允许开发者通过自定义样式来改变 Checkboxes 的外观。以下是一个示例，演示如何修改复选框的颜色和大小。

<style>
    .filled-in:checked + span {
        color: #4CAF50; /* 选中时文本颜色 */
    }
    .filled-in {
        transform: scale(1.2); /* 增加复选框的大小 */
    }
</style>

6. 结合其他组件的使用

6.1 与 Select 组件结合使用

Checkboxes 可以与 Select 组件结合使用，使得用户能够从多个选项中进行选择。以下是一个示例，展示了如何将复选框与下拉选择框结合使用。

<div class="container">
    <h1 class="header">Checkboxes 与 Select 示例</h1>
  
    <div class="input-field col s12">
        <select>
            <option value="" disabled selected>选择一个选项</option>
            <option value="1">选项 1</option>
            <option value="2">选项 2</option>
            <option value="3">选项 3</option>
        </select>
        <label>选择公司</label>
    </div>

    <form>
        <p>
            <label>
                <input type="checkbox" class="filled-in" />
                <span>选项 A</span>
            </label>
        </p>
        <p>
            <label>
                <input type="checkbox" class="filled-in" />
                <span>选项 B</span>
            </label>
        </p>
        <p>
            <label>
                <input type="checkbox" class="filled-in" />
                <span>选项 C</span>
            </label>
        </p>
        <a class="waves-effect waves-light btn" id="submit-btn">提交</a>
    </form>
</div>

<script>
    $(document).ready(function() {
        $('select').formSelect(); // 初始化 Select 组件

        $('#submit-btn').click(function() {
            var selectedOptions = [];
            $('input[type=checkbox]:checked').each(function() {
                selectedOptions.push($(this).siblings('span').text());
            });
            alert("您选择的复选框: " + selectedOptions.join(", "));
        });
    });
</script>

6.2 整体布局效果

在这个示例中，我们展示了如何将复选框与选择框结合使用，让用户可以在下拉框中选择一个选项，同时也可以在复选框中选择多个选项。这样，用户可以更加灵活地进行选择。

7. 使用 Checkbox 的其他属性

7.1 只读和禁用状态

你可以使用 disabled 和 readonly 属性来设置复选框的状态。以下是一个示例：

<p>
    <label>
        <input type="checkbox" class="filled-in" disabled />
        <span>选项 D（禁用）</span>
    </label>
</p>
<p>
    <label>
        <input type="checkbox" class="filled-in" readonly />
        <span>选项 E（只读）</span>
    </label>
</p>

7.2 处理复选框组

如果需要处理一组复选框，可以将它们放在一个数组中，方便提交表单。

<form id="checkbox-form">
    <p>
        <label>
            <input type="checkbox" class="filled-in" name="options" value="Option 1" />
            <span>选项 1</span>
        </label>
    </p>
    <p>
        <label>
            <input type="checkbox" class="filled-in" name="options" value="Option 2" />
            <span>选项 2</span>
        </label>
    </p>
    <a class="waves-effect waves-light btn" id="submit-btn">提交</a>
</form>

<script>
    $(document).ready(function() {
        $('#submit-btn').click(function() {
            var selectedOptions = [];
            $('input[name="options"]:checked').each(function() {
                selectedOptions.push($(this).siblings('span').text());
            });
            alert("您选择的选项: " + selectedOptions.join(", "));
        });
    });
</script>

8. 总结

Materialize CSS 的 Checkboxes 组件是一种便捷且实用的功能，能够显著提高用户在表单中选择多个选项的体验。通过简单的 HTML 结构和 JavaScript 逻辑，开发者可以快速实现这个功能，并根据需求进行自定义样式和行为。

在本文中，我们探

讨了 Checkboxes 的基本用法、属性和方法，并展示了如何与其他组件结合使用，提供了多个示例以帮助开发者更好地理解这一功能。希望这篇博客能够帮助你在 Materialize CSS 中更好地使用 Checkboxes 组件，提升用户体验并简化表单操作。

chat评论区
评论列表
menu