选中另一个复选框时取消选中复选框 JavaScript

简介

在操作复选框时，有时需要实现一种机制，即在选中一个复选框时，取消其他复选框的选中状态。这种实现方式可以利用 JavaScript 来完成。

实现方法

实现方法可以分为两部分：

1. 为每个复选框添加 onclick 事件，用于判断是否选中，并根据选中状态来执行后续操作；
2. 在选中一个复选框时，取消其他复选框的选中状态。

添加 onclick 事件

首先，需要为每个复选框添加 onclick 事件：

<input type="checkbox" id="checkbox1" onclick="handleCheckboxClick(this)">
<input type="checkbox" id="checkbox2" onclick="handleCheckboxClick(this)">
<input type="checkbox" id="checkbox3" onclick="handleCheckboxClick(this)">

其中，onclick 事件会调用名为 handleCheckboxClick 的函数，并传入当前复选框的引用（即 this）。接下来，需要实现 handleCheckboxClick 函数来判断选中状态。

function handleCheckboxClick(checkbox) {
    if (checkbox.checked) {
        // 当前复选框被选中，执行相应操作
    } else {
        // 当前复选框被取消选中，执行相应操作
    }
}

当复选框被选中时，checkbox.checked 会返回 true，否则返回 false。

取消其他复选框的选中状态

接下来，需要在选中一个复选框时，取消其他复选框的选中状态。这可以通过遍历所有复选框，判断是否为当前复选框以外的复选框，并将它们的选中状态设为 false 来实现。

function handleCheckboxClick(checkbox) {
    if (checkbox.checked) {
        // 取消其他复选框的选中状态
        const checkboxes = document.querySelectorAll('input[type=checkbox]');
        for (let i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i] !== checkbox) {
                checkboxes[i].checked = false;
            }
        }

        // 当前复选框被选中，执行相应操作
    } else {
        // 当前复选框被取消选中，执行相应操作
    }
}

结语

通过以上方法，可以实现选中另一个复选框时取消选中复选框的功能。这种方法也可以扩展到其他输入框，如单选框等。