jQuery .is(':checked')始终返回false 无法获取checkbox选中状态

核心原因是页面存在重复ID，违反HTML全局ID唯一的规范。
你给每个复选框的外层包裹<div>，和内部真正的复选框<input>设置了完全相同的ID：

• 第一组：外层div id为influentials-checkbox，内部input的id也是influentials-checkbox
• 第二组：外层div id为retweets-checkbox，内部input的id也是retweets-checkbox

使用$("#xxx")获取元素时，jQuery会返回DOM中第一个匹配该ID的元素，也就是外层的div容器。div是普通块级元素，不存在checked属性，自然会出现.is(':checked')始终返回false、读取checked属性报错的问题。其他模块功能正常，只是因为那些模块不存在ID重复的问题。

两种方案可选，优先推荐第一种，从根源上符合HTML规范。

方案1：修改重复ID #

给外层div设置和内部input不重复的ID即可，原有JS逻辑不需要任何改动。修改后的复选框结构参考：

<!-- Influentials Checkbox -->
<div id="influentials-checkbox-wrap" class="checkbox">
  <span for="influentials-checkbox" id="influentials-checkbox-label" class="checkbox-label">Only use posts from Influential People/Brands</span>
  <input type="checkbox" name="influentials-checkbox" id="influentials-checkbox" class="form-check-input" />
</div>

<!-- Retweets Checkbox -->
<div id="retweets-checkbox-wrap" class="checkbox">
  <span for="retweets-checkbox" id="retweets-checkbox-label" class="checkbox-label">Include retweets in the results</span>
  <input type="checkbox" name="retweets-checkbox" id="retweets-checkbox" class="form-check-input" checked />
</div>

方案2：限定选择器匹配范围 #

如果暂时不想调整HTML结构，可以修改jQuery选择器，明确匹配input元素，绕开外层div：

const check = () => {
  let influentials = $("input#influentials-checkbox").is(":checked");
  let retweets = $("input#retweets-checkbox").is(":checked");
  console.log(influentials, retweets);
};

注意：该方案只是临时规避问题，ID重复依然会带来其他潜在DOM操作bug，建议优先修改重复ID。

后续遇到表单属性读取异常时，可先在控制台打印选择器获取到的DOM节点，确认是否匹配到了正确的元素：

// 打印匹配到的第一个元素，核对标签类型是否为目标input
console.log($("#influentials-checkbox")[0])

如果打印出的节点标签名不是INPUT、type属性不是checkbox，就说明选择器匹配到了错误元素。

内容的提问来源于stack exchange，提问作者Mickey Vershbow