切换复选框 jQuery - JavaScript

在 Web 开发中，我们经常需要使用复选框来实现多选的功能。但是在某些情况下，我们需要通过 JavaScript 动态切换复选框的选中状态。本文将介绍如何使用 jQuery 和 JavaScript 实现切换复选框的功能。

HTML 代码

首先，我们需要在 HTML 中定义一个复选框：

<input type="checkbox" id="myCheckbox">

使用 jQuery 切换复选框

使用 jQuery，我们可以使用以下代码来切换复选框的选中状态：

$('#myCheckbox').prop('checked', function (i, value) {
    return !value;
});

代码解释：

1. $('#myCheckbox') 选择了 id 为 myCheckbox 的复选框元素。

2. 使用 prop 方法来获取或设置元素的属性值。第一个参数为属性名，第二个参数为回调函数。回调函数的两个参数分别为原属性值和当前属性值。如果回调函数返回 true，则会将属性值设置为 checked，否则会将属性值设为 ''。

3. 回调函数的逻辑是返回原属性值的逆值，即将原来的选中状态取反。

使用 JavaScript 切换复选框

如果您不想使用 jQuery，那么您可以使用以下代码来切换复选框的选中状态：

var checkbox = document.getElementById('myCheckbox');

checkbox.checked = !checkbox.checked;

代码解释：

1. document.getElementById('myCheckbox') 获取了 id 为 myCheckbox 的复选框元素。

2. checkbox.checked 获取或设置复选框的选中状态。如果为 true，则复选框被选中，否则复选框未被选中。

3. !checkbox.checked 将原来的选中状态取反。