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

【问题标题】：how to add checked attribution into input type text with javascript如何使用javascript在输入类型文本上添加选中的属性
【发布时间】：2021-10-21 01:33:13
【问题描述】：

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;
           }
       });

但两者都不起作用。谁能告诉我这是什么问题？

【问题讨论】：

wishAllCheck 和 wishSub 是什么？因为未定义的变量会造成巨大的混乱。
我刚刚编辑了js代码@Someone_who_likes_SE
querySelectorAll 返回多元素，你必须对多元素使用循环

标签： javascript input

【解决方案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>

【讨论】：

"CSS类名不能直接被它的名字引用"这是什么意思？
我的错误。此处不相关。

【解决方案2】：

这里的问题是您在元素列表 (wishSub) 上设置属性“已选中”，而不是单个复选框。您需要一个 for 循环来遍历它们并选中/取消选中每个。

这是我用更简单的代码制作的代码笔。 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;
  }
});

【讨论】：

【解决方案3】：

看看这一行：

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>

【讨论】：