jquery判断复选框选中状态以及区分attr和prop

当我们在开发网站时，经常需要使用jQuery来操作复选框的选中状态。但是，由于jQuery的版本和浏览器的不同，有时候我们会遇到一些坑。本次攻略就来详细讲解如何使用jQuery判断复选框的选中状态，并探讨attr和prop两种方法之间的区别与使用场景。

一、使用prop方法判断复选框选中状态

jQuery的prop方法可以获取和设置HTML元素的属性值。对于复选框而言，prop方法可以获取它的checked属性，通过观察checked属性的值来判断复选框是否被选中。

1. 获取复选框的选中状态：

$('input[type="checkbox"]').prop('checked')

上述代码可以获取页面上第一个复选框的选中状态，如果它被选中则返回true，否则返回false。

1. 设置复选框的选中状态：

$('input[type="checkbox"]').prop('checked', true) // 将复选框设置为选中状态

上述代码会将页面上所有的复选框都设置为选中状态。如果只想设置第一个复选框为选中状态，可以使用以下代码：

$('input[type="checkbox"]').eq(0).prop('checked', true)

通过eq方法获取第一个复选框的jQuery对象。

二、使用attr方法判断复选框选中状态

除了prop方法，jQuery还提供了attr方法用于获取和设置HTML元素的属性值。和prop方法类似，我们也可以用attr方法来判断复选框的选中状态，只不过需要获取它的属性值是checked还是true。

1. 获取复选框的选中状态：

$('input[type="checkbox"]').attr('checked')

上述代码可以获取页面上第一个复选框的选中状态，如果它被选中则返回checked属性的值，否则返回undefined。

1. 设置复选框的选中状态：

$('input[type="checkbox"]').attr('checked', 'checked') // 将复选框设置为选中状态

上述代码会将页面上所有的复选框都设置为选中状态。如果只想设置第一个复选框为选中状态，可以使用以下代码：

$('input[type="checkbox"]').eq(0).attr('checked', 'checked')

通过eq方法获取第一个复选框的jQuery对象。

三、attr和prop的区别与使用场景

在jQuery中，attr和prop两种方法都可以用来获取和设置HTML元素的属性值。它们之间的区别在于：attr获取属性值时返回的是属性值的字符串，而prop获取属性值时返回的是属性值的布尔值。

在获取checked属性值时，attr方法会返回字符串'checked'，而prop方法会返回true或false。在设置checked属性值时，attr方法将属性值设置为'checked'后，如果刷新页面，复选框的选中状态会依然保持原来的状态。而prop方法可以正确地设置复选框的选中状态。

因此，如果想要获取或设置复选框的选中状态，建议使用prop方法。如果想要获取或设置HTML元素的非布尔属性(如id、title等)，则可以使用attr方法。