jquery checkbox无法用attr()二次勾选问题的解决方法

当使用 jQuery 中的 attr 函数更改复选框的 checked 属性时，可能会遇到无法勾选的问题。这是因为 attr() 不会触发复选框的点击事件，从而更改其状态。为了解决这个问题，我们需要使用 jQuery 中的其他函数或方法来更改复选框的状态。

问题解决方案

方案一：使用 prop() 方法

prop() 方法可以更改 checked 属性，并且会触发复选框的点击事件。因此，可以使用以下示例代码来更改复选框的状态：

// 选中复选框
$("input[type='checkbox']").prop("checked", true);

// 取消选中复选框
$("input[type='checkbox']").prop("checked", false);

方案二：使用 click() 方法

click() 方法可以模拟用户点击复选框时触发的事件，从而更改其状态。因此，可以使用以下示例代码来更改复选框的状态：

// 选中复选框
$("input[type='checkbox']").click();

// 取消选中复选框
$("input[type='checkbox']").click();

示例说明

以下是两个示例，演示如何使用 prop() 和 click() 方法来更改复选框的状态。

示例一：使用 prop() 方法

HTML 代码：

<input type="checkbox" id="checkbox1"> 复选框1<br>
<input type="checkbox" id="checkbox2"> 复选框2<br>

JavaScript 代码：

// 选中复选框1
$("#checkbox1").prop("checked", true);

// 取消选中复选框2
$("#checkbox2").prop("checked", false);

使用 prop() 方法更改复选框的状态很简单，只需要将要更改的 checked 属性传递给该方法即可。在上面的示例中，我们选中了复选框1并取消了复选框2。

示例二：使用 click() 方法

HTML 代码：

<input type="checkbox" id="checkbox1"> 复选框1<br>
<input type="checkbox" id="checkbox2"> 复选框2<br>

JavaScript 代码：

// 选中复选框1
$("#checkbox1").click();

// 取消选中复选框2
$("#checkbox2").click();

使用 click() 方法更改复选框的状态也很简单，只需要调用该方法即可。在上面的示例中，我们选中了复选框1并取消了复选框2。