前端 JS 代码如何实现 checkbox 互斥功能

当需要在一组复选框（checkbox）中实现互斥功能，即同一时刻只能选择一个复选框，可以通过监听每个复选框的变化事件并在事件触发时清除其他复选框的选中状态来实现。这样做确保用户只能勾选一个复选框，避免了传统多选框允许的多个选项同时选择。另外，可以添加一个隐藏字段来存储选中的值，以便在表单提交时使用。通过JavaScript监听onChange事件、遍历checkbox组以及更新隐藏字段值，我们可以高效地实现互斥功能的前端逻辑。

一、设置HTML结构

首先，创建HTML复选框元素并赋予它们相同的类名以方便JavaScript操作，同时添加一个隐藏的字段来存储最终选中的复选框的值。

<input type="checkbox" class="mutex-checkbox" name="option" value="1">

<input type="checkbox" class="mutex-checkbox" name="option" value="2">
<input type="checkbox" class="mutex-checkbox" name="option" value="3">
<input type="hidden" id="selected-checkbox" name="selected_option" value="">

这样的结构可以让JavaScript代码轻松访问所有复选框，并且在表单提交时隐藏字段将包含选中的复选框值。

二、编写JavaScript逻辑

在JavaScript中，我们要为所有的复选框添加事件监听器。当任一复选框被选中时，触发函数检查所有复选框并确保只有当前选中的保持选中状态。

document.addEventListener('DOMContentLoaded', function() {

    var checkboxes = document.querySelectorAll('.mutex-checkbox');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].addEventListener('change', function() {
            if (this.checked) {
                // 每当一个复选框被选中，清除其他所有复选框的选中状态
                var otherCheckboxes = document.querySelectorAll('.mutex-checkbox');
                for (var j = 0; j < otherCheckboxes.length; j++) {
                    if (otherCheckboxes[j] !== this) { // 避免当前复选框被取消勾选
                        otherCheckboxes[j].checked = false;
                    }
                }
                // 更新隐藏字段的值
                document.getElementById('selected-checkbox').value = this.value;
            }
        });
    }
});

在用户选中任意一个复选框后，其他复选框会自动取消选中，并更新hidden字段值。

三、优化用户体验

用户体验可以通过简单的逻辑优化来提升。例如，如果用户点击已经选中的复选框，通常我们可以假设他们想要取消选择。因此，我们可以添加逻辑来处理这个情况。

在上面的代码中添加一小段逻辑，允许用户取消当前选中的复选框，并清空隐藏字段的值。

for (var i = 0; i < checkboxes.length; i++) {

    checkboxes[i].addEventListener('change', function() {
        if (this.checked) {
            // ...
        } else {
            // 如果当前复选框是被取消选中的，清空隐藏字段的值
            document.getElementById('selected-checkbox').value = '';
        }
    });
}

这确保了用户可以通过再次点击来取消选择，并且表单数据反映这一点。

四、考虑表单提交行为

复选框互斥行为还应该在表单提交时考虑。为表单添加事件监听器，并在提交事件触发时进行检查，确保用户已经至少选择了一个选项。

document.getElementById('my-form').addEventListener('submit', function(event) {

    var selectedValue = document.getElementById('selected-checkbox').value;
    if (!selectedValue) {
        event.preventDefault(); // 阻止表单提交
        alert('请选择一个选项!');
    }
});

在表单提交之前，该逻辑确保用户已经做出了一个选择，如果没有，将阻止表单提交并提示用户。

通过这些步骤，我们在前端实现了复选框的互斥功能。用户界面逻辑是明确的，用户的行为被有效地指导和约束，以确保数据的准确性和表单的有效性。

相关问答FAQs：

1. 如何实现前端 checkbox 互斥功能？

前端使用JS代码实现checkbox互斥功能相对简单，主要通过监听checkbox的选中状态，并根据需要将其它checkbox的选中状态进行调整。

2. 你可以给出一个实现前端 checkbox 互斥功能的示例代码吗？

当有多个checkbox需要实现互斥功能时，可以为每个checkbox添加相同的class，然后通过JS代码为class相同的checkbox添加点击事件，实现互斥功能。
以下是一个实现checkbox互斥功能的示例代码：

// 获取所有的checkbox元素
const checkboxes = document.querySelectorAll('.checkbox');

// 遍历每个checkbox元素，并为其添加点击事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', function() {
    // 若该checkbox被选中，则将class相同的其他checkbox的选中状态置为未选中
    if (this.checked) {
      checkboxes.forEach(otherCheckbox => {
        if (otherCheckbox !== this) {
          otherCheckbox.checked = false;
        }
      });
    }
  });
});

3. 如何将实现的前端 checkbox 互斥功能应用到网页中？

你可以将上述代码放置在网页的<script>标签中，或者将其封装成一个可复用的JS函数，并在需要的地方调用该函数。确保在网页加载时执行该代码，以便正确应用checkbox的互斥功能。另外，你还可以根据需要进行样式调整，使checkbox的互斥状态更加明显易懂，提升用户体验。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。