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

Question

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

Answer 1

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

---

你的代码已经基本实现了你的需求，但还有一些细节需要调整和完善。以下是一些改进的建议和完整的代码示例：

1. 确保只勾选一个checkbox：在你的代码中，如果用户勾选了一个checkbox，其他所有checkbox都会被取消勾选。这是符合需求的。

2. 确保取消勾选时不影响其他未勾选的checkbox：在你的代码中，如果用户取消勾选了一个checkbox，其他checkbox的状态不会受到影响，这也是符合需求的。

3. 封装逻辑：将逻辑封装在一个函数中，方便调用和维护。

以下是完整的代码示例：

$(document).ready(function() {
  function toggleCheckbox() {
    // 获取所有checkbox
    var checkboxes = $('input[type="checkbox"]');
    var checkedCount = checkboxes.filter(':checked').length;

    if (this.checked) {
      // 如果勾选了checkbox，取消勾选其他所有checkbox
      checkboxes.not(this).prop('checked', false);
    } else if (checkedCount === 1) {
      // 如果取消勾选了一个checkbox，且只剩下一个勾选的checkbox，重新勾选它
      $(this).prop('checked', true);
    }
  }

  // 为每个checkbox添加点击事件监听器
  $('input[type="checkbox"]').on('click', toggleCheckbox);
});

代码解释

• $(document).ready()：确保文档加载完成后再执行代码。
• toggleCheckbox：这是一个函数，用于处理checkbox的点击事件。
  • checkedCount：计算当前勾选的checkbox数量。
  • if (this.checked)：如果当前点击的checkbox被勾选了：
    • 使用checkboxes.not(this).prop('checked', false)取消勾选其他所有checkbox。
  • else if (checkedCount === 1)：如果当前点击的checkbox被取消勾选，并且只剩下一个勾选的checkbox：
    • 使用$(this).prop('checked', true)重新勾选当前的checkbox。

这样，你的checkbox列表将满足以下条件：

1. 每次操作时，只能勾选或取消一个checkbox。
2. 当进行勾选或取消操作时，排除那些已经被勾选的项。

希望这能帮助你解决问题！如果有其他问题，随时告诉我。