HOWTO · jQuery

在 jQuery 中检查和取消检查复选框

本文演示了如何使用 jQuery 选中和取消选中复选框。

本页内容

有两种方法可以选中和取消选中复选框。对于 jQuery 1.6 以上的版本,使用 prop() 函数,对于 1.6 以下的版本,使用 attr() 函数。

在 jQuery 中使用 prop() 方法来检查和取消检查复选框

prop() 方法用于访问输入并设置其属性。此方法操作选中的属性,根据我们是否要选中或取消选中复选框来修复它的 truefalse

语法:

$("#checkbox_name").prop("checked", true);

根据 W3C 表单的定义,checked 属性是一个布尔属性,这意味着如果元素存在,则关联的属性是实际的——即使质量没有值或设置为 false

例子:

$(document).ready(function () {
            $(".clickCheck").click(function () {
                $("#chechId").prop("checked", true);
            });
            $(".clickUncheck").click(function () {
                $("#chechId").prop("checked", false);
            });
        });

这里演示

clickCheck 是按钮 Yes 的类名,而 clickUncheck 是按钮 No 的类名。同样,#chechId 是这里使用的复选框的 id 名称,用于选中和取消选中一个复选框。

输出:

jquery 取消选中复选框 - 代码运行后

在这里,你可以看到两个按钮,即。当你单击按钮时,它将在触发复选框属性时检查复选框,即 true

选中复选框

同样,当你单击按钮时,它将取消选中复选框,因为它会触发复选框属性,即 false

取消选中复选框

在 jQuery 中使用 attr() 方法检查和取消选中复选框

它与早期的方法相同,但更适合早期的 jQuery 版本。attr() 方法用于访问输入并设置其属性。

我们必须将 checked 属性更改为 truefalse,具体取决于我们要选中或取消选中复选框。

将属性更改为 true 时,需要提供 click() 方法以确保修改选项组中的选项。

语法:

$("#checkbox_name").attr("checked", true);

例子:

$(document).ready(function() {
                $(".clickCheck").click(function() {
                    $("#chechId").attr("checked", true);
                });

                $(".clickUncheck").click(function() {
                    $("#chechId").attr("checked", false);
                });
            });

这里演示

使用 attr() 方法的输出与 prop() 方法的输出相同。

运行代码后的输出:

jquery 取消选中复选框 - 代码运行后

点击 Yes 按钮后的输出:

选中复选框

单击按钮后的输出:

取消选中复选框