📌  相关文章
📜  如何取消选中除使用 jQuery 的复选框之外的所有其他复选框？(1)

📅  最后修改于: 2023-12-03 14:52:11.285000             🧑  作者: Mango

如何取消选中除使用 jQuery 的复选框之外的所有其他复选框？

如果你正在使用 jQuery 并且需要取消选中除当前复选框之外的其他所有复选框，可以按照以下步骤操作：

  1. 首先，在 HTML 文件中引入 jQuery 库。你可以通过以下方式在 <head> 标签中引入：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  1. 确保你的复选框都有一个共同的 CSS 类或 ID，以便于选择它们。例如，我们给每个复选框添加了一个名为 "checkbox" 的 CSS 类：
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
  1. 在你的 JavaScript 文件中，使用以下代码来取消选中除当前复选框之外的其他所有复选框：
$(document).ready(function() {
  $('.checkbox').change(function() {
    if ($(this).is(':checked')) {
      $('.checkbox').not(this).prop('checked', false);
    }
  });
});

解释一下上述代码：

  • $(document).ready(function() { ... }) 将代码放在页面加载完毕后执行的回调函数中，确保 DOM 已完全加载。
  • $('.checkbox').change(function() { ... }) 为所有具有 "checkbox" 类的复选框绑定一个 change 事件处理函数。
  • if ($(this).is(':checked')) { ... } 检查当前复选框是否被选中。
  • $('.checkbox').not(this).prop('checked', false); 使用 not() 方法选择除当前复选框之外的其他复选框，并将它们的 checked 属性设置为 false，从而取消选中其他复选框。

现在，当用户选中一个复选框时，其他复选框将自动取消选中。

请注意，以上代码仅适用于使用 jQuery 的情况。如果你不打算使用 jQuery，可以使用 JavaScript 的原生方法来实现相同的功能，只是代码会稍微复杂一些。