jQuery 复选框选中状态查询和操作指南

## jQuery 复选框选中状态检查指南

简介

在 Web 开发中，交互式元素（如复选框）的选中状态至关重要。jQuery 提供了强大的方法来查询和操纵复选框的选中属性，从而简化了动态应用程序的开发。

查询选中状态

jQuery 提供了多种方法来查询复选框的选中状态：

1. attr() 方法

if ($('#isAgeSelected').attr('checked')) {
  // 复选框已选中
} else {
  // 复选框未选中
}

2. prop() 方法

if ($('#isAgeSelected').prop('checked')) {
  // 复选框已选中
} else {
  // 复选框未选中
}

prop() 方法直接返回属性值的原始类型，而 attr() 方法默认返回字符串。

基于选中状态执行操作

确定了选中状态后，可以基于它执行操作：

1. 显示或隐藏元素

$('#isAgeSelected').change(function() {
  if ($(this).prop('checked')) {
    $("#txtAge").show();
  } else {
    $("#txtAge").hide();
  }
});

2. 启用或禁用元素

if ($('#isMarried').prop('checked')) {
  $("#txtSpouseName").prop('disabled', false);
} else {
  $("#txtSpouseName").prop('disabled', true);
}

结论

通过使用 jQuery 的 attr() 或 prop() 方法，可以轻松地查询和操作复选框的选中状态。这使开发人员能够创建响应用户交互的动态应用程序，简化了 Web 表单和数据收集流程。

常见问题解答

1. 如何在 onChange 事件中检查复选框的选中状态？

$('#isTermsAccepted').change(function() {
  if ($(this).prop('checked')) {
    // 复选框已选中
  } else {
    // 复选框未选中
  }
});

2. 如何使用 jQuery 批量检查复选框的选中状态？

var checkedBoxes = $('input[type="checkbox"]:checked');

3. 如何使用 jQuery 取消选中复选框？

$('#isTermsAccepted').prop('checked', false);

4. 如何使用 jQuery 选中复选框？

$('#isTermsAccepted').prop('checked', true);

5. 如何使用 jQuery 触发复选框的点击事件？

$('#isTermsAccepted').trigger('click');