如何使用 javascript 在输入类型文本中添加选中的属性

Question

HTML

<table>
   <th>
     <input type="checkbox" class="wish_all" />
   </th>

   <tr>
      <td>
         <input type="checkbox" class="wish_sub" />
      </td>       
     </tr>

     <tr>
      <td>
        <input type="checkbox" class="wish_sub"/>
      </td>
     </tr>
</table>

我想在单击“.wish_all”时启用切换功能，然后选中所有 'wish_sub' 这是 javascript 我尝试了两种方法

    var wishAll = document.querySelector('.wish_all');
    var wishSub = document.querySelectorAll('.wish_sub');
    var wishAllCheck = wishAll.hasAttribute('checked')

wishAll.addEventListener('click', function () {
           if (wishAllCheck === true) {
               wishAllCheck.removeAttribute('checked')
               wishSub.removeAttribute('checked')
           } else {
               wishAllCheck.setAttribute('checked', true)
               wishSub.setAttribute('checked', true)
              
           }
       }); 


   

    wishAll.addEventListener('click', function () {
           if (wishAllCheck === true) {
               wishAllCheck.removeAttribute('checked')
               wishSub.removeAttribute('checked')
           } else {
               wishAllCheck.checked = true;
               wishSub.checked = true;
           }
       });

但两者都不起作用。谁能告诉我问题出在哪里？

Answer 1

对单个元素使用document.querySelector()或对多个元素使用document.querySelectorALl()，需要迭代才能访问多个元素的单个元素NodeList

document.querySelector('.wish_all').addEventListener('change', function() {
    const checked = this.checked;
    document.querySelectorAll('.wish_sub').forEach(el => {
        el.checked = checked;
    });
});

<table>
 <th>
   <input type="checkbox" class="wish_all" />
 </th>
 <tr>
  <td>
   <input type="checkbox" class="wish_sub" />
  </td>       
 </tr>
 <tr>
  <td>
    <input type="checkbox" class="wish_sub"/>
  </td>
 </tr>
</table>

Answer 2

看看这一行：

var wishSub = document.querySelectorAll('.wish_sub');

快速 console.log()，这就是您所看到的：

那是 NodeList。您不能在 NodeList 上 setAttribute，您只能在单个元素上这样做。

var wishAll = document.querySelector('.wish_all');
var wishSub = document.querySelectorAll('.wish_sub');
var wishAllCheck = wishAll.hasAttribute('checked');

wishAll.addEventListener('click', function() {
  var wishAllCheck = wishAll.checked; // <-- you have to access it within the handler
  if (!wishAllCheck) {
    //wishAllCheck.removeAttribute('checked'); <-- unnecessary as the check automatically removes
    for (var i = 0; i < wishSub.length; i++) {
      wishSub[i].removeAttribute('checked');
    }
  } else {
    //wishAllCheck.setAttribute('checked', true)
    for (var i = 0; i < wishSub.length; i++) {
      wishSub[i].setAttribute('checked', true);
    }
  }
});

<table>
  <th>
    <input type="checkbox" class="wish_all" />
  </th>

  <tr>
    <td>
      <input type="checkbox" class="wish_sub" />
    </td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" class="wish_sub" />
    </td>
  </tr>
</table>

Answer 3

这里的问题是您在元素列表 (wishSub) 而不是单个复选框上设置“选中”属性。您需要一个 for 循环来遍历所有这些并且 check/uncheck 每个。

这是我用更简单的代码制作的代码笔。 https://codepen.io/nph0613/pen/QWMKQXr

var wishAll = document.querySelector('.wish_all');
var wishSub = document.querySelectorAll('.wish_sub');

wishAll.addEventListener('click', function () {
  for (let i=0; i<wishSub.length; i++) {
    wishSub[i].checked = wishAll.checked;
  }
});

如何使用 javascript 在输入类型文本中添加选中的属性

how to add checked attribution into input type text with javascript

javascript

input