
本文解析 jquery 链式操作中常见的误用:为何 `$("input").eq(0)(":checked")` 会报错“is not a function”,并详解正确判断单个表单元素是否选中的方法(`.is()` 与 `.filter()`),附代码示例与关键注意事项。
在 jQuery 开发中,一个高频误区是混淆「jQuery 构造函数」与「jQuery 实例对象」的行为。$(即 jQuery)本身是一个函数,支持形如 $(selector) 的调用;但其返回值——一个 jQuery 对象(如 $("input").eq(0) 的结果)——是普通对象,不是函数。因此,像 $("input").eq(0)(":checked") 这样的写法,实质是尝试对一个对象执行函数调用(类似 {}()),JavaScript 引擎自然抛出 TypeError: jQuery(...) is not a function。
✅ 正确做法取决于你的实际目标:
-
若只需判断第一个 是否被勾选(布尔结果):使用 .is() 方法
const isFirstChecked = $("input").eq(0).is(":checked"); console.log(isFirstChecked); // true 或 false -
若需获取所有已勾选的 元素(仍为 jQuery 对象):应在原始集合上使用 .filter()
const checkedInputs = $("input").filter(":checked"); console.log(checkedInputs.length); // 已勾选的总数 -
若明确要操作第一个 且仅当它被勾选时才执行后续逻辑:可组合 .is() 与条件分支
const $firstInput = $("input").eq(0); if ($firstInput.is(":checked")) { console.log("第一个输入框已被选中"); // 执行相关业务逻辑,如提交验证、样式高亮等 }
⚠️ 注意事项:
- .eq(0) 返回的是包含单个 DOM 元素的 jQuery 对象,不支持再次作为选择器函数调用;
- :checked 是伪类选择器,仅对 和 ,对文本框、按钮等无效;
- 若需兼容性更强的原生写法(如脱离 jQuery),可直接访问 DOM 属性:$("input").get(0)?.checked(注意空值检查);
- 避免链式滥用:$("input:eq(0):checked") 虽语法合法,但语义模糊(它查找 DOM 中首个且已勾选的 input),与 eq(0).is(":checked") 的“先取第一个、再判断”逻辑不同,务必按意图选择。
总结:jQuery 的设计哲学是「函数创建对象,对象提供方法」。理解 $() 是构造函数、而 .eq() 等方法返回的是不可调用的实例对象,是避免此类错误的根本。始终优先使用语义清晰的 .is()(判断)、.filter()(筛选)、.find()(后代查找)等标准 API,而非试图将 jQuery 对象当作函数二次调用。










