异常教程

jQuery :checked 选择器（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么需要关注选中状态？

在网页开发中，表单元素（如复选框、单选按钮）的选中状态是用户交互的核心。开发者需要根据这些状态动态改变页面内容、触发操作或提交数据。然而，手动遍历所有元素并检查其状态会增加代码复杂度。jQuery :checked 选择器正是为解决这一问题而生——它提供了一种简洁高效的方式，直接定位处于选中状态的表单元素。

本文将从基础到进阶，结合实际案例，深入解析如何利用这一选择器优化前端交互逻辑。

一、理解 :checked 选择器的核心概念

1.1 选择器的定位目标

:checked 是 jQuery 中的 表单过滤选择器，专门用于筛选出当前处于选中状态的复选框（<input type="checkbox">）或单选按钮（<input type="radio">）。其语法如下：

$("input:checked")

形象比喻：
可以将:checked选择器想象为“状态探测器”，它像交通信号灯一样，专门检测元素是否处于“选中”这一特定状态。

1.2 选择器的适用范围

  • 复选框：允许多选，每个复选框的选中状态独立。
  • 单选按钮：同一组内只能选中一个，因此使用:checked时通常需要结合其他条件（如 name 属性）。

二、基础用法：快速定位选中元素

2.1 选择复选框

假设页面有以下复选框：

<input type="checkbox" name="color" value="red"> 红色  
<input type="checkbox" name="color" value="green"> 绿色  
<input type="checkbox" name="color" value="blue"> 蓝色

要获取所有被选中的复选框，只需：

// 获取选中的复选框元素集合  
var selectedCheckboxes = $("input[type='checkbox']:checked");  

// 输出选中的值  
selectedCheckboxes.each(function() {  
  console.log($(this).val());  
});

关键点：

  • 使用 input[type='checkbox'] 精确指定元素类型，避免误选其他输入类型。

2.2 选择单选按钮

对于单选按钮组：

<input type="radio" name="gender" value="male"> 男  
<input type="radio" name="gender" value="female"> 女

获取当前选中的单选按钮：

var selectedRadio = $("input[name='gender']:checked");  

if (selectedRadio.length > 0) {  
  console.log("选中的性别是：" + selectedRadio.val());  
} else {  
  console.log("未选择任何选项");  
}

技巧：
通过 length 属性可快速判断是否存在选中项。

三、动态操作：根据选中状态触发行为

3.1 实时响应选中状态变化

通过监听 change 事件，可以实时捕获用户选择的变化。例如，统计选中的复选框数量：

<div>  
  <input type="checkbox" name="hobby" value="reading"> 阅读  
  <input type="checkbox" name="hobby" value="sports"> 运动  
  <input type="checkbox" name="hobby" value="music"> 音乐  
  <p>已选数量：<span id="count">0</span></p>  
</div>  

<script>  
$(document).ready(function() {  
  $("input[name='hobby']").change(function() {  
    var count = $("input[name='hobby']:checked").length;  
    $("#count").text(count);  
  });  
});  
</script>

效果：每次勾选或取消勾选复选框时，页面上的数字会实时更新。

3.2 动态修改表单行为

结合选中状态，可以动态启用或禁用按钮。例如，要求用户至少选择一个选项才能提交：

<form>  
  <input type="checkbox" name="agree" value="agree"> 我同意条款  
  <button type="submit" id="submit-btn" disabled>提交</button>  
</form>  

<script>  
$(document).ready(function() {  
  $("input[name='agree']").change(function() {  
    if ($("input[name='agree']:checked").length > 0) {  
      $("#submit-btn").prop("disabled", false);  
    } else {  
      $("#submit-btn").prop("disabled", true);  
    }  
  });  
});  
</script>

关键逻辑：

  • 当复选框被选中时，按钮解除禁用状态。
  • 使用 .prop() 方法直接操作原生属性，确保兼容性。

四、进阶技巧：与复杂场景结合

4.1 结合其他选择器精准筛选

通过组合选择器，可以针对更复杂的场景。例如，仅选择父元素为 .category 的选中复选框：

$(".category input[type='checkbox']:checked");

或者，排除已选中的复选框：

$("input[type='checkbox']:not(:checked)");

比喻：
这就像用“滤镜”叠加，逐步缩小目标范围，直到找到需要操作的元素。

4.2 处理动态生成的元素

如果表单元素是通过 JavaScript 动态添加的，需使用事件委托：

$(document).on("change", "input[name='dynamic-checkbox']", function() {  
  if ($(this).is(":checked")) {  
    console.log("新添加的复选框被选中");  
  }  
});

关键点：

  • 使用 on() 方法绑定事件到静态父元素（如 document），并通过选择器参数过滤目标元素。

五、实际案例：构建交互式表单

5.1 案例 1：购物车价格计算

假设用户可勾选多个商品，并实时计算总价：

<table>  
  <tr>  
    <th>商品</th>  
    <th>价格</th>  
    <th>选择</th>  
  </tr>  
  <tr>  
    <td>笔记本</td>  
    <td>￥899</td>  
    <td><input type="checkbox" class="item" data-price="899"></td>  
  </tr>  
  <tr>  
    <td>U盘</td>  
    <td>￥89</td>  
    <td><input type="checkbox" class="item" data-price="89"></td>  
  </tr>  
</table>  
<div>总价：<span id="total">￥0</span></div>  

<script>  
$(document).ready(function() {  
  $(".item").change(function() {  
    var total = 0;  
    $(".item:checked").each(function() {  
      total += parseInt($(this).data("price"));  
    });  
    $("#total").text("￥" + total);  
  });  
});  
</script>

实现原理：

  • 通过 .data() 方法读取自定义属性 data-price，累加计算总价。

5.2 案例 2：多条件筛选

在列表中根据复选框的选中状态过滤内容：

<div class="filter">  
  <input type="checkbox" name="filter" value="fruit"> 水果  
  <input type="checkbox" name="filter" value="vegetable"> 蔬菜  
</div>  

<ul class="items">  
  <li class="fruit">苹果</li>  
  <li class="vegetable">胡萝卜</li>  
  <li class="fruit vegetable">番茄</li>  
</ul>  

<script>  
$(document).ready(function() {  
  $("input[name='filter']").change(function() {  
    var selectedFilters = $("input[name='filter']:checked").map(function() {  
      return "." + this.value;  
    }).get().join(",");  

    if (selectedFilters === "") {  
      $(".items li").show();  
    } else {  
      $(".items li").hide().filter(selectedFilters).show();  
    }  
  });  
});  
</script>

关键技巧：

  • 使用 map() 方法将选中的值转换为 CSS 选择器（如 .fruit, .vegetable）。
  • filter() 方法精准显示符合条件的元素。

六、常见问题与解决方案

6.1 为什么选中状态未被检测到？

原因：

  • 未正确绑定 change 事件。
  • 元素被动态添加，未使用事件委托。

解决方案：

  • 确保在 $(document).ready() 中初始化事件监听。
  • 对动态元素使用 on() 方法。

6.2 如何同时处理多个复选框组？

示例：
为每个复选框组指定唯一 name 属性，并在选择器中通过 name 过滤：

// 获取名为 "group1" 的组的选中项  
$("input[name='group1']:checked");

七、性能优化建议

7.1 减少 DOM 查询

将选择器结果缓存到变量中，避免重复查询：

var $checkboxes = $("input[type='checkbox']");  
// 后续操作直接使用 $checkboxes

7.2 避免全页面搜索

为选择器添加父元素范围，缩小搜索范围：

$("#form-container input:checked");

结论：掌握 :checked 选择器，提升交互体验

通过本文，我们系统学习了 jQuery :checked 选择器 的核心用法、动态操作技巧及实际案例。这一选择器不仅是简化代码的关键工具，更是构建智能表单、动态页面的基础。

无论是验证表单、统计选中项，还是根据用户选择实时渲染内容，:checked 都能帮助开发者高效实现需求。建议读者通过以下步骤实践：

  1. 在简单表单中尝试基础用法；
  2. 结合事件监听构建交互逻辑；
  3. 通过复杂案例巩固组合选择器的用法。

掌握这一技能后，你的前端项目将更具响应性和用户友好性。

（全文约 1800 字）

最新发布

查看更多文章