jquery checkbox列表一次只能选中或取消一个，不包括之前勾选的项

Question

1.有一个checkbox列表
2.每次操作,只能勾选一个或取消一个
3.上述操作，排除已勾选的项(即已经勾选了一个,这个不计算在内，不能被取消)

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

要实现这个功能，你可以使用以下 jQuery 代码。这段代码将监听 checkbox 的点击事件，并根据你的要求更新选中状态。

$(document).ready(function() {
    // 监听所有 checkbox 的点击事件
    $('input[type="checkbox"]').on('click', function(e) {
        // 阻止默认行为，防止checkbox状态被立即切换
        e.preventDefault();

        var $checkbox = $(this);
        var checkedCount = $('input[type="checkbox"]:checked').length;

        // 如果当前只有一个checkbox被选中，允许切换选中状态
        if (checkedCount === 1) {
            // 切换当前checkbox的状态
            $checkbox.prop('checked', !$checkbox.prop('checked'));
        } else if (checkedCount > 1) {
            // 如果有多个checkbox被选中，取消最后一个勾选的checkbox
            $('input[type="checkbox"]:checked').last().prop('checked', false);
        }
    });
});

这段代码的工作流程如下：

1. 当文档加载完成后，为所有类型为 checkbox 的 <input> 元素绑定点击事件。
2. 点击事件触发时，首先阻止默认行为，以控制checkbox的选中状态。
3. 计算当前已勾选的 checkbox 数量。
4. 如果只有一个 checkbox 被勾选，允许用户切换当前点击的 checkbox 的选中状态。
5. 如果有多个 checkbox 被勾选，只取消最后一个被勾选的 checkbox 的选中状态。

请注意，这段代码假设你的 HTML 结构中 checkbox 列表已经定义好，并且每个 checkbox 都有一个 <input type="checkbox"> 标签。此外，这段代码没有处理初始状态，即页面加载时可能已经有一个或多个 checkbox 被选中的情况。如果需要处理这种情况，你可以在 $(document).ready 函数中添加额外的逻辑来初始化状态。