如何判断checkbox是否被选中：主流方法实操指南

你可通过原生JS属性、jQuery方法、DOM对象状态三类核心方式判断checkbox是否被选中，原生checked属性适配所有浏览器，返回布尔值精准判定状态，defaultChecked仅识别初始默认选中状态，jQuery方法适配快速开发场景，所有方法均适配网页前端静态、动态渲染的复选框检测需求，仅对隐藏销毁、未挂载DOM节点的checkbox无法生效。

checkbox原生JS判断方式

获取checkbox的DOM节点后，直接读取节点的checked属性即可完成判断，该属性为实时状态属性，复选框勾选时返回true，未勾选时返回false，是前端开发中最通用、准确率较高的判断方式。你可通过id、class、标签选择器获取节点，例如通过document.getElementById获取指定复选框，编写代码constbox=document.getElementById('复选框id');if(box.checked){勾选后执行逻辑}即可实现状态判定，该方式无需引入任何插件，原生浏览器API支持，适配所有HTML5规范页面。

区分两个易混淆原生属性可避免判断失误，defaultChecked属性仅读取HTML标签中默认的checked初始属性，不会跟随用户点击操作变化，仅用于判断页面加载时复选框的默认选中状态，无法检测用户后续操作后的实时状态。绝大多数开发场景中，仅需使用checked属性，误用defaultChecked会导致动态状态判断完全失效，这是前端开发中高频出错点。

空节点无法判断状态。

jQuery判断checkbox是否被选中方法

在引入jQuery库的项目中，你可使用两种简洁方式实现判断，第一种是$(selector).is(':checked')，该方法返回布尔值，可直接用于条件判断，适配单个及多个复选框批量检测场景，兼容性覆盖jQuery1.0以上所有版本。第二种是$(selector).prop('checked')，优先用于1.6及以上新版本jQuery，专门用于获取DOM原生属性，比attr方法准确率更高。

jQuery的attr方法不推荐用于实时状态判断，该方法仅读取标签初始属性，用户手动勾选或取消勾选后，attr获取的值不会同步更新，会出现状态判断滞后的问题，无法适配动态交互页面的开发需求。

不同判断方法对比

动态渲染checkbox的判断技巧

页面加载完成后通过AJAX、JS动态生成的checkbox，不能直接在页面初始化代码中判断状态，此时DOM节点未完成挂载，会获取到空值导致判断失效。你需要将判断逻辑写入节点渲染完成的回调函数，或使用事件委托，在点击、提交等触发事件中实时获取节点状态，确保判定结果有效。

该方法的适用边界是仅适配正常挂载、可见或隐藏的有效DOM节点，页面中被display:none隐藏、脱离文档流、已被JS销毁的checkbox节点，所有常规判断方法均无法获取有效状态，需先判定节点是否存在于文档流中，再执行状态判断。

表单提交场景下，可直接通过表单对象elements集合快速遍历所有checkbox，批量判断选中状态，大幅简化批量复选框的校验代码，适配表单提交、批量筛选等高频业务场景。