如何使用jQuery检查复选框是否已选中

在前端开发中，我们常常需要根据某些元素的状态来执行特定操作。例如，当用户选中一个复选框时，显示一个文本框；如果用户取消选中，则隐藏文本框。本文将详细介绍如何使用jQuery检查复选框是否已选中，并根据复选框状态执行相应的操作。

问题描述

假设我们有一个复选框 and 一个文本框，当复选框被选中时，文本框显示；否则隐藏。以下代码在大多数情况下会返回false，甚至当复选框已选中时也是一样的。

<input type="checkbox" id="isAgeSelected" />
<div id="txtAge" style="display:none">Age is selected</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  if ($('#isAgeSelected').attr('checked')) {
    $('#txtAge').show()
  } else {
    $('#txtAge').hide()
  }
</script>

如何成功地检查复选框的checked属性？

解决方法

方法1：使用`checked`属性

你可以直接使用DOM元素的checked属性来检查复选框的状态：

if (document.getElementById('isAgeSelected').checked) {
  $('#txtAge').show()
} else {
  $('#txtAge').hide()
}

方法2：使用`toggle`方法

使用jQuery的toggle方法使代码更整洁：

$('#isAgeSelected').click(function () {
  $('#txtAge').toggle(this.checked)
})

方法3：使用`is`方法

jQuery的is()方法也是一个不错的选择：

if ($('#isAgeSelected').is(':checked')) {
  $('#txtAge').show()
} else {
  $('#txtAge').hide()
}

方法4：使用`prop`方法

从jQuery 1.6开始，推荐使用prop方法来处理布尔属性：

if ($('#checkMeOut').prop('checked')) {
  // 当选中时执行操作
} else {
  // 当未选中时执行其他操作
}

以下是使用prop方法的完整示例：

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />
<script>
  if ($('#checkMeOut').prop('checked')) {
    $('#txtAge').show()
  } else {
    $('#txtAge').hide()
  }
</script>

不同版本jQuery的区别

jQuery 1.6及以上版本

使用prop获取复选框状态：

$('#isAgeSelected').prop('checked')

jQuery 1.5及以下版本

使用attr获取复选框状态：

$('#isAgeSelected').attr('checked')

通用方案（适用于所有版本）

事件监听器中直接使用this.checked：

$('#isAgeSelected').on('change', function () {
  if (this.checked) {
    $('#txtAge').show()
  } else {
    $('#txtAge').hide()
  }
})

小结

在这篇文章中，我们探讨了多种使用jQuery检查复选框是否被选中的方法。从使用DOM原生checked属性，到使用jQuery的toggle、is、prop方法，满足不同场景下的需求。希望这些方法能帮助你在开发中更好地处理复选框状态。