Check multiple checkboxes with one global funtion Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Check multiple checkboxes with one global funtion without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am trying to select a list of checkboxes. The inputs are generated dynamically and there is more than one list of checkboxes – so I created a global function by sending in the id of the < table > so that the correct list of checkboxes are checked/unchecked. I think the looping of the nodes in the nodelist is causing the problem but in my mind, it makes sense, but the checkboxes are not checking and there is no error popping up either.

function checkAll(name) {
  var nodeList = $(name).next('input[type="checkbox"]');
  var nodes = $(nodeList);
  nodes.each(function(node) {
    if (!node.disabled) {
      node.checked = true;
    }
  }); 
}
<table summary="User locations" id="LocationsTable">
  <tr>
    <th>
      <input type='hidden' name='StoreSelector' id='StoreSelector' value='true'>
      Other locations (multi-store)
      <button type="button" onclick="javascript:checkAll('LocationsTable');">All</button>
      <button type="button" onclick="javascript:uncheckAll('LocationsTable');">None</button>
    </th>
  </tr>
  <tr id="LocationRow">
    <td>
      <input type="checkbox" name="Store" id="Store" value="Store">&nbsp;<span id="StoreName">Store 1</span>
    </td>
  </tr>
</table>

Answer

You can use find here very well. Consider that your name is an ID, so put in fron of your name the hashtag #name. Also I would recommend using an event listener. I updated your code to use it therefore I gave your btn an id.

document.getElementById('btn').addEventListener('click', function(){checkAll('LocationsTable')})


function checkAll(name) {
  var nodeList = [...$(`#${name}`).find('input[type="checkbox"]')];
  nodeList.forEach(function(node) {

    if (!node.disabled) {
      node.checked = true;
    }
  }); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table summary="User locations" id="LocationsTable">
  <tr>
    <th>
      <input type='hidden' name='StoreSelector' id='StoreSelector' value='true'>
      Other locations (multi-store)
      <button id='btn' type="button" >All</button>
      <button type="button" onclick="javascript:uncheckAll('LocationsTable');">None</button>
    </th>
  </tr>
  <tr id="LocationRow">
    <td>
      <input type="checkbox" name="Store" id="Store" value="Store">&nbsp;<span id="StoreName">Store 1</span>
            <input type="checkbox" name="Store" id="Store" value="Store">&nbsp;<span id="StoreName">Store 1</span>

      <input type="checkbox" name="Store" id="Store" value="Store">&nbsp;<span id="StoreName">Store 1</span>

    </td>
  </tr>
</table>
We are here to answer your question about Check multiple checkboxes with one global funtion - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji