how to add checked attribution into input type text with javascript-CodePudding

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>

i want to make toggle function as i click '.wish_all', then all 'wish_sub' is checked this is javascript i tried two ways

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

but both are not working. could anyone please let me know what is the problem??

CodePudding user response：

Use document.querySelector() for single element or document.querySelectorALl() for multiple elements, iteration is required to access individual elements for multi-elements 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>

CodePudding user response：

The problem here is you're setting the attribute "checked" on a list of elements (wishSub) instead of the individual checkboxes. You need a for loop to go through them all and check/uncheck each one.

Here's a codepen I made with a little bit simpler code.

That's a NodeList. You can't setAttribute on a NodeList, you can only do that on individual elements.

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>