javascript - 为什么此复选框缺少 "checked"属性？

Question

在我正在编写的组件中，我想检查元素的“checked”属性。不幸的是，该元素似乎不包含“checked”属性，至少不是我设置的方式。

这是 JS 片段:

var submenus  = document.querySelectorAll( ".hbm-panel-item-label" );
for ( var label of submenus ) {
  // console.log( "label.for = " + label.getAttribute( "for" ) );

  label.addEventListener( "click", function() {
    var label_for = this.getAttribute( "for" ); 
    // console.log( label_for + " was clicked." );

    var checkboxes = document.querySelectorAll( ".hbm-panel-item-checkbox" );
    for ( var cb of checkboxes ) {
      console.debug( cb );

      if ( cb.getAttribute( "name" ) === label_for ) {
        console.log( label_for + " has attribute 'checked': " + cb.hasAttribute( "checked" ) );
        console.log( label_for + " is " + cb.getAttribute( "checked" ) );  
      }
    }
  });
}

...结果如下:

当我打开该元素的属性时，我确实看到一个值为“false”的选中属性:

提前道歉，我是一个 JS 菜鸟。我感觉这很简单。我还感觉到，如果我使用 jQuery，这将需要大约三行代码......

Answer 1

属性位于 DOM 中，属性位于被解析到 DOM 中的 HTML 中。 复选框的 HTML 没有“checked”属性，但复选框有一个属性“checked”。 您可能只需要检查

cb.checked

而不是寻找属性。