迹忆客 专注技术分享

你将学习在这篇博文中选中 jQuery 复选框的几种方法。我们还将讨论他们的性能指标，让你为每个用例选择最佳方法。

我们将为常见的复选框用例展示有用的快捷方式。对于人们常犯的错误，我们也有一个陷阱。

使用 .get() 方法直接 DOM 操作来检查复选框是否被选中

jQuery 允许我们使用 .get() 方法访问每个 jQuery 对象下方的 DOM 节点。然后我们可以查询这个 DOM 节点来直接访问/设置不同的属性。

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[name='checkboxArray']").get(0).checked?'The first box is checked':'The first box is not checked'}
    // <p/>`);
});

你可以在下面看到此代码的工作演示。

让我们分解这段代码。 （请参阅随附的 HTML 和 CSS 文件以更好地理解代码。）

我们选择一个按钮来触发 check 事件，并在其上附加 click 事件的回调。在回调中，我们通过将检查结果作为文本添加到 p 元素来显示检查结果；我们使用 jQuery .html() 方法。

请注意，这个 jQuery 方法会覆盖前面的文本，这是我们在这里想要的用例。我们希望每次新检查都有一个新的 HTML 输出。

主要检查逻辑在我们传递给 .html() 方法的行中。我们首先在 jQuery 对象中选择所有具有 name = 'checkboxArray' 的输入元素。

请注意，选择器只返回一个 jQuery 对象，我们还没有访问底层 DOM 节点的权限。

但是我们随后链接了 .get 方法，就像这样 - .get(0)。我们现在可以访问 jQuery selected 集合中的第一个 DOM 节点。

我们将检查第一个复选框是否被选中，因此我们通过将 0 作为参数传递给 .get() 方法来访问第一个 DOM 节点。

我们现在可以直接访问 jQuery 的 .checked 属性来检查复选框是否被选中。

专业提示 1：

我们上面访问的 .checked 属性是附加到 DOM 节点的 JavaScript 属性（或者，从技术上讲，是 IDL 属性）。它与仅显示 HTML 元素的初始或默认选中/未选中值（技术上是 HTML 内容属性）的 HTML checked 属性不同。

我们将在本博文后面详细介绍这种差异。

专业提示 2：

直接 DOM 操作非常快。因此，此方法允许使用 jQuery 来检查复选框是否以卓越的性能被选中。

使用直接 DOM 操作的快捷方式检查复选框是否被选中，使用 Dereferencing 操作符

每个 jQuery 都表现得像一个数组对象。因此，我们可以使用短数组解引用运算符 [] 而不是 .get 方法来锁定这种行为并减少一些代码。

$("button").on("click",function(){
    $("p").html(`<p>
    // ${$("input[name='checkboxArray']")[0].checked?'The first box is checked':'The first box is not checked'}
    // <p/>`);
});

除了使用解引用运算符外，代码与上面相同：... $("input[name = 'checkboxArray']")[0]... 。

用 .prop() 方法检查复选框是否被选中

我们还可以使用 jQuery .prop() 方法从元素中提取底层 JavaScript 属性，而不是直接访问 DOM 节点。

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[name='checkboxArray']").prop('checked')?'The first box is checked':'The first box is not checked'}
    <p/>`);
});

你可以在下面看到此代码的工作演示。

大部分代码与上面类似。让我们看一下与关键区别的行，即：

 $("input[name='checkboxArray']").prop('checked')...

我们在上面提取了相同的 .checked 属性，但在这里使用了 jQuery .prop() 方法。

专业提示：

为什么使用 jQuery .prop() 方法？jQuery .prop() 方法也是一个快速操作（与我们接下来看到的基于选择器的方法相比）。

使用 JavaScript 或基于 JS 的库（如 jQuery）查询 DOM 元素属性是一种很好的做法。

用 .is() 方法检查复选框是否被选中

我们将 :checked 选择器与 .is() 方法结合使用 jQuery 来检查复选框是否被选中。

:checked 选择器返回所有选中或选中的元素。对于复选框，这意味着它选择了那些被选中的框。

$("some selector:checked");

// returns those elements that are checked

你可以在此处阅读有关 :checked 选择器的更多信息。

.is() 方法将 jQuery 对象与选择器匹配，如果匹配该选择器则返回 true。

$("some jQuery object").is("some_selector");

//returns true if the jQuery object matches the selector

你可以在此处阅读有关 .is() 方法的更多信息。

让我们将两者合并为一个代码来检查复选框是否被 jQuery 选中。

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[id='#first']").is(":checked")?'The first box is checked':'The first box is not checked'}
    <p/>`);
});

在下面观看此方法的演示。

设置事件处理程序和回调的代码与前面的方法类似。主要变化在于检查的实现，如下所示：

$("input[id = '#first']").is(":checked")...

如果第一个 id 的复选框被选中，则 .is() 方法返回 true，因为我们将 :checked 选择器作为参数传递给它。

专业提示：

is() 方法不会创建新的 jQuery 对象或修改原始对象。这种行为使其非常适合在回调和事件处理程序中使用。

检查复选框是否使用 jQuery 检查的常见用例

现在我们已经了解了基本方法，让我们为常见用例构建一些现成的快速脚本。

检查是否使用元素的 ID 选中了复选框

我们可以通过以下代码使用元素的 ID 进行检查：

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[id='#second']").is(":checked")?'The second box is checked':'The secong box is not checked'}
    <p/>`);
});

我们使用属性 equals 选择器选择 ID 为 second 的复选框，并传递 id='#second' 选项。

你可以在下面看到工作演示。

使用类来检查复选框是否被选中

我们还可以选择一组具有共同类的复选框来查看它们是否被选中。代码非常简单：

$("button").on("click",function(){
    $("p").html(' ');
    $("input[class='non-first']").each(function(){
        $("p").append(`
        ${$(this).is(":checked")? 'The ' + $(this).attr("id") + ' box is checked':'The ' + $(this).attr("id") +' box is not checked'}
        <br> `);
    });
});

我们选择所有具有非第一类的复选框，然后使用 .each() 方法遍历它们中的每一个。最后，我们对每次迭代运行检查并将输出添加到 p 元素。

请注意，我们在这个用例中使用了 append() 方法，因为我们不想覆盖前一次迭代的输出。

你可以在下面看到工作演示：

如果使用 jQuery 选中，则取消选中复选框

如果使用 jQuery 选中，我们使用以下代码段取消选中复选框：

$("button").on("click",function(){
    // To find the checked boxes by ID
    let $checkedBox = $("input[id ='first']");
    // To run the check and toggle if the checkbox is checked
    if ($checkedBox.is(':checked')){
        $checkedBox.prop("checked", false);
    }
});

我们在这里使用 .prop() 方法的 set 形式。

$(some_jQuery_object).prop("checked",false);

// sets the "checked" property to false for the selected jQuery object

你可以在此处查看此代码段的工作演示：

用 jQuery 检查所有复选框是否被选中

我们可以使用以下样板来查找是否选中了给定集合中的所有复选框。

$("button").on("click",function(){
    let result = true;
    // To find the list of checked boxes in an array of related checkboxes
    let $checkedList = $("input[name='checkboxArray']");
    // To iterate and do something with each checked box on the list above
    // Here we display info related to them in the DOM
    $checkedList.each(function(){
    if (!($(this).is(":checked"))){
        result = false;
    }
    });
    // to display the number of checked boxes
    $("p").html(`All checkboxes are ${result?'':'not'} checked`);
});

你可以在此处查看该代码段的工作演示：

让我们分解这段代码的逻辑。

我们像上面一样附加事件处理程序并遍历集合中的每个复选框。然后我们在每个复选框上运行 .each() 函数，如果未选中任何复选框，则将 result 变量更改为 false。

最后，我们输出结果。

用 jQuery 检查在给定的集合中是否有复选框被选中

我们可以使用以下代码检查是否至少有一个复选框被选中：

$("button").on("click",function(){
    let result = false;
    // To find the list of checked boxes in an array of related checkboxes
    let $checkedList = $("input[name='checkboxArray']");
    // To iterate and do something with each checked box on the list above
    // Here we display info related to them in the DOM
    $checkedList.each(function(){
    if ($(this).is(":checked")){
        result = true;
    }
    });
    // to display if any (at least) one of the checkboxes is checked
    $("p").html(`At least one checkbox in the given collection is ${result?'':'not'} checked`);
});

让我们首先通过下面的工作演示来看看该方法的实际效果。

逻辑很简单。我们对集合中的每个复选框进行检查，如果选中了其中一​​个复选框，我们会将 result 变量更改为 true。

否则，我们将 result 变量的值保持为 false 并相应地输出消息。

如果复选框未被选中，用 jQuery 禁用提交按钮

如果未选中特定复选框，我们可以编写一个简单的代码段来禁用提交按钮。

$("button").on("click",function(){
    // To find the specific checkbox
    let $checkedBox = $("input[id='third']");
    let $submitBtn = $("input[name='submitBtn']");
    if ($($checkedBox).is(":checked")){
        $submitBtn.prop("disabled",false);
    }
    else {
        $submitBtn.prop("disabled",true);
    }
});

你可以在下面看到此解决方案的输出：

逻辑很简单。我们确定复选框是否使用 .is() 方法和 :checked 选择器进行检查，就像我们上面的方法一样。

如果复选框被选中，我们将 submitBtn 元素的 disabled 属性设置为 false；否则，我们将其设置为 true。

使用 jQuery 检查复选框是否被选中的 .attr() 方法已被废弃

HTML 属性与 DOM 属性不同。很多时候，属性匹配 HTML 属性，但并非总是如此。

与复选框一样，HTML checked 属性只是元素默认或初始选中/未选中状态的指示符。它与显示元素当前选中/未选中状态的 checked DOM 属性不对应。

jQuery .attr() 方法仅引用 HTML 属性。因此，你不应使用此方法来查找复选框是否被选中。

之前你可以用 jQuery 做到这一点，但是在 1.6 版中，当添加了 .prop() 方法来显式访问 DOM 属性并且 .attr() 仅限于 HTML 属性时，行为发生了变化。

你可以详细了解 jQuery 如何以不同方式处理属性和属性于此处。