一次只选中一个复选框并在选中或取消选中这两个复选框时执行特定任务

基础概念

复选框（Checkbox）是一种常见的用户界面元素，允许用户从多个选项中选择一个或多个选项。通常，复选框用于表示一组可选项中的多个选择。

类型

单选复选框：一次只能选中一个复选框。
多选复选框：可以同时选中多个复选框。

应用场景

表单填写：如用户注册、问卷调查等。
设置选项：如软件配置、应用设置等。
数据筛选：如数据列表中的筛选条件。

实现一次只选中一个复选框

要实现一次只选中一个复选框，可以使用JavaScript来控制复选框的行为。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single Checkbox Selection</title>
    <script>
        function handleCheckboxChange(checkbox) {
            const checkboxes = document.querySelectorAll('.single-select-checkbox');
            checkboxes.forEach(cb => {
                if (cb !== checkbox) {
                    cb.checked = false;
                }
            });
            // 执行特定任务
            if (checkbox.checked) {
                console.log('Checkbox selected:', checkbox.value);
                // 在这里添加你的特定任务代码
            } else {
                console.log('Checkbox deselected:', checkbox.value);
                // 在这里添加你的特定任务代码
            }
        }
    </script>
</head>
<body>
    <form>
        <label>
            <input type="checkbox" class="single-select-checkbox" value="Option 1" onchange="handleCheckboxChange(this)">
            Option 1
        </label><br>
        <label>
            <input type="checkbox" class="single-select-checkbox" value="Option 2" onchange="handleCheckboxChange(this)">
            Option 2
        </label><br>
    </form>
</body>
</html>

解释

HTML部分：
- 创建两个复选框，并为每个复选框添加class="single-select-checkbox"以便于JavaScript选择。
- 使用onchange事件监听复选框的变化，并调用handleCheckboxChange函数。

JavaScript部分：
- handleCheckboxChange函数接收当前变化的复选框作为参数。
- 使用querySelectorAll选择所有具有single-select-checkbox类的复选框。
- 遍历所有复选框，如果当前复选框不是触发事件的复选框，则将其checked属性设置为false，确保一次只选中一个复选框。
- 根据复选框的选中状态执行特定任务，并在控制台输出相关信息。