JavaScript布尔值切换异常：HTML属性true转false失效问题

这个问题我之前踩过坑！核心原因是混淆了jQuery的attr()和prop()方法的使用场景，没搞清楚HTML属性和DOM属性的区别导致的。

问题根源拆解 #

1. 属性值的类型坑：

   • 你用attr()获取的是HTML标签上的字符串值，比如aria-checked="false"拿到的是字符串"false"。如果直接用Boolean()转布尔值，Boolean("false")会返回true（JS里非空字符串都是真值）—— 哪怕你用attr('aria-checked') === 'true'这种正确的方式转成了布尔值，设置环节还是会出问题。
   • 当你用attr('aria-checked', false)设置反向值时，jQuery会直接把这个属性从元素上移除（这是attr()处理布尔值的特殊逻辑），而不是设置成字符串"false"。这时候元素上没了aria-checked属性，虽然ARIA规范默认它是false，但你的代码可能还在依赖存在的属性值判断状态，导致看起来切换没生效。

2. ARIA属性的正确打开方式：
   像aria-checked这类ARIA属性属于DOM元素的属性，得用prop()方法来操作，它能直接处理布尔值，不会搞出移除属性的幺蛾子。

修复后的完整代码示例 #

假设你的原JS代码是类似这样的，修改后：

$('.toggle-search').on('click', function() {
  // 用prop直接获取布尔值，不用自己转
  let isChecked = $(this).prop('aria-checked');
  // 切换状态
  isChecked = !isChecked;
  // 用prop设置布尔值，jQuery会自动转成正确的HTML属性
  $(this).prop('aria-checked', isChecked);
  // 更新显示的文本
  $(this).find('span').text(isChecked.toString());
});

关键知识点梳理 #

• attr() 和 prop() 怎么选：
  • attr()管的是HTML标签上写的属性（都是字符串），适合自定义属性或者不需要布尔值的原生属性。
  • prop()管的是DOM元素本身的属性（可以是布尔、数字等类型），适合checked、disabled这类原生布尔属性，以及所有ARIA属性。
• 用prop()操作aria-checked时，你直接传布尔值true/false就行，jQuery会自动帮你转换成对应的HTML属性值（比如false对应aria-checked="false"），不会出现属性被移除的情况，自然就能正常切换了。

现在再测试下，不管是从false切到true，还是反向切换，都能完美生效啦！

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