一次选中一个复选框 jQuery - JavaScript

在网页开发中，我们常常需要使用复选框来进行多选操作。但是，在某些情况下，我们需要限制用户只能选择一个复选框，例如单选按钮。

本文将介绍如何使用 jQuery 和 JavaScript 实现一次选择一个复选框的功能。

HTML 代码

<input type="checkbox" name="checkbox" value="1">
<input type="checkbox" name="checkbox" value="2">
<input type="checkbox" name="checkbox" value="3">

在上面的代码中，我们创建了三个复选框，它们的 name 属性都为 "checkbox"，value 属性分别为 1、2、3。

jQuery 代码

$('input[type="checkbox"]').on('change', function() {
  $('input[type="checkbox"]').not(this).prop('checked', false);
});

代码解析：

• 选中所有类型为 "checkbox" 的复选框元素。
• 绑定 change 事件。
• 当改变当前复选框的状态时执行回调函数。
• 使用 not() 方法过滤出除当前复选框外的其他复选框。
• 使用 prop() 方法将其他复选框的 checked 属性设置为 false，实现一次只能选择一个的功能。

JavaScript 代码

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', function() {
    for (var j = 0; j < checkboxes.length; j++) {
      if (checkboxes[j] !== this) {
        checkboxes[j].checked = false;
      }
    }
  });
}

代码解析：

• 使用 document.querySelectorAll() 方法选择所有类型为 "checkbox" 的复选框元素。
• 使用 for 循环遍历所有复选框元素。
• 绑定 change 事件到每个复选框元素上。
• 当改变当前复选框的状态时执行回调函数。
• 使用 for 循环遍历所有复选框元素，如果当前复选框元素不是正在改变状态的那个，则将其 checked 属性设置为 false，实现一次只能选择一个的功能。

以上就是使用 jQuery 和 JavaScript 实现一次选择一个复选框的方法。