为何我的复选框元素未显示checked属性？JS新手求助

嘿，别焦虑！刚入门JS碰到这种问题真的太常见了，我来给你掰扯清楚～

首先你得搞明白两个容易混淆的概念：HTML属性节点和DOM元素属性。你在元素上看到的checked="false"是HTML里的属性节点，但浏览器解析后，会把它转换成DOM元素的checked属性——这里有个坑：只要HTML里存在checked属性（不管它的值写的是啥，哪怕是"false"或者空），DOM的checked属性都会是true，这是浏览器的默认行为。

原生JS的正确做法 #

• 如果你想知道复选框实际是否被选中，直接用DOM元素的checked属性，它是布尔值（true/false）：

  const checkbox = document.getElementById('your-checkbox-id');
  console.log(checkbox.checked); // 这才是真实的选中状态
  

• 如果你非要读取HTML里写的那个checked属性值（一般没啥用），可以用getAttribute：

  console.log(checkbox.getAttribute('checked')); // 会返回你写的"false"，但这和实际选中状态无关
  

用jQuery的快速解法 #

你说的没错，jQuery确实能让这个操作更简洁：

• 判断是否选中，用:checked选择器配合is()：

  console.log($('#your-checkbox-id').is(':checked')); // 返回布尔值
  

• 或者直接用prop()方法获取DOM属性（和原生的checkbox.checked完全一致）：

  console.log($('#your-checkbox-id').prop('checked'));
  

• 同样，如果你要读HTML属性节点，用attr()，但还是那句话，这个值不代表实际选中状态：

  console.log($('#your-checkbox-id').attr('checked'));
  

举个直观的例子 #

假设你的HTML是：

<input type="checkbox" id="test-checkbox" checked="false">

• 原生checkbox.checked会返回true（因为checked属性存在）
• getAttribute('checked')返回"false"
• jQuery的prop('checked')返回true，attr('checked')返回"false"

所以核心结论就是：判断复选框是否选中，永远用DOM的checked属性（原生或jQuery的prop），别管HTML里写的属性值是什么～

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