jQuery :checked 选择器

在 web 开发中，经常会遇到需要操作页面中的复选框或单选按钮的情况。jQuery 提供了一个非常方便的选择器 :checked，用来选取被选中的复选框或单选按钮。在本文中，我将详细介绍如何使用这个选择器以及一些实际应用场景。

基本用法

:checked 选择器可以用来选取页面中被选中的复选框或单选按钮。例如，如果我们有一个复选框：

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

我们可以使用以下 jQuery 代码来选取这个复选框：

$("#myCheckbox:checked")

这样就可以选取到被选中的复选框了。

实际应用

1. 复选框全选/全不选

假设我们有一个全选复选框和一组子复选框，我们希望当全选复选框被选中时，所有子复选框也被选中，反之亦然。我们可以使用 :checked 选择器来实现这个功能：

<input type="checkbox" id="selectAll">全选

<input type="checkbox" class="childCheckbox">选项1
<input type="checkbox" class="childCheckbox">选项2
<input type="checkbox" class="childCheckbox">选项3

$("#selectAll").change(function() {
    if ($(this).is(":checked")) {
        $(".childCheckbox").prop("checked", true);
    } else {
        $(".childCheckbox").prop("checked", false);
    }
});

这样当全选复选框被选中时，所有子复选框也会被选中，反之亦然。

2. 获取被选中的复选框数量

有时候我们需要获取页面中被选中的复选框的数量，我们可以使用 :checked 选择器结合 length 属性来实现：

<input type="checkbox" class="myCheckbox" checked>
<input type="checkbox" class="myCheckbox">
<input type="checkbox" class="myCheckbox" checked>

var checkedCount = $(".myCheckbox:checked").length;
console.log("被选中的复选框数量为：" + checkedCount);

这样就可以获取到被选中的复选框的数量了。

总结

通过本文的介绍，我们了解了 jQuery 的 :checked 选择器的基本用法和一些实际应用场景。希望这些知识对你在 web 前端开发中有所帮助！