父元素隐藏时，能否通过jQuery勾选/取消隐藏HTML复选框？

嘿，我来帮你解决这两个关于隐藏复选框的问题：

当然可以！元素的可见性和它的DOM状态是完全独立的。哪怕复选框本身或者它的直接父元素被设置为隐藏（比如用display: none、visibility: hidden），你依然可以通过代码修改它的checked属性来完成勾选或取消勾选操作。

举个简单的例子：

<!-- 父元素完全隐藏 -->
<div style="display: none;">
  <input type="checkbox" id="hiddenCb">
</div>

在控制台执行这段jQuery代码：

$('#hiddenCb').prop('checked', true);
// 验证状态
console.log($('#hiddenCb').prop('checked')); // 会输出true

你会发现复选框的选中状态确实被修改了，只是因为元素隐藏，你看不到视觉变化而已。

你遇到的“只有显示状态才能成功”的问题，大概率是操作方式或者选择器的问题，和元素是否隐藏本身无关。常见的坑点有这几个：

• 误用:visible选择器：如果你的代码里用了$('input:checkbox:visible')来选中目标，那隐藏的复选框会被直接排除，自然没法修改状态。去掉:visible伪类就能选中所有复选框了。
• 用attr()代替prop()：checked是DOM元素的内置属性，应该用prop()来操作它的状态。如果用attr('checked', true)，只有第一次设置可能生效，后续动态修改会因为HTML属性和DOM状态不同步而失效。
• DevTools视觉误导：有时候浏览器DevTools的元素面板不会实时更新checked的视觉标记，但实际上DOM状态已经改变了。你可以直接在控制台打印$('#yourCb').prop('checked')来确认真实状态，而不是只看面板。

给你一个靠谱的操作示例，不管复选框是否隐藏都能生效：

// 切换复选框的选中状态
const cb = $('#targetCheckbox');
cb.prop('checked', !cb.prop('checked'));

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