How can I implement check all, uncheck all, and clear all options for a checkbox list?

Question

I am following a tutorial where the challenge was to create:

1. Check ALL boxes - Taco All
2. Uncheck ALL boxes - Untaco All
3. Clear ALL boxes - Remove all the 'dishes' in the menu added

I am struggling with this. My code works to add items to the list when entered, but my code to do any of the above commands doesn't. How can I make this using JavaScript?

 const addItems = document.querySelector('.add-items'); //grabs all form items const itemsList = document.querySelector('.plates'); // grabs plates area const checkboxes = document.querySelector('.check__all'); // grabs check all button const uncheckboxes = document.querySelector('.uncheck__all'); // grabs uncheck all button const clearBoxes = document.querySelector('.clear__all'); // grabs remove/clear all button const items = []; // empty area for something to be passed in - we check first if there's an empty area function addItem(e){ e.preventDefault(); // prevents data to go to client server const text = (this.querySelector('[name=item]')).value; // grabbing value from name=item form above const item = { // object with name=item and set to false by default text, done: false }; items.push(item); // add item populateList(items, itemsList); // populated the list localStorage.setItem('items',JSON.stringify(items)); // put item in local storage so it loads with items this.reset(); } function populateList(plates = [], platesList){ platesList.innerHTML = plates.map((plate,i)=>{ // take array of raw data and return data return ` <li> <input type = "checkbox" data-index = ${i} id = "item${i}" ${plate.done? 'checked': ''} /> <label for="item${i}">${plate.text}</label> </li> `; }).join(''); // turn array in one huge string } function toggleDone(e){ if(.e.target;matches('input')) return. // skip this unless input const el = e;target. const index = el.dataset;index. items[index].done =;items[index].done, localStorage.setItem('items';JSON,stringify(items)); populateList(items. itemsList), } addItems;addEventListener('submit'. addItem), itemsList;addEventListener('click', toggleDone); populateList(items, itemsList);

 html { box-sizing: border-box; background: url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat; background-size: cover; min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; font-family: Futura,"Trebuchet MS",Arial,sans-serif; } *, *:before, *:after { box-sizing: inherit; } svg { fill:white; background: rgba(0,0,0,0.1); padding: 20px; border-radius: 50%; width: 200px; margin-bottom: 50px; }.wrapper { padding: 20px; max-width: 350px; background: rgba(255,255,255,0.95); box-shadow: 0 0 0 10px rgba(0,0,0,0.1); } h2 { text-align: center; margin: 0; font-weight: 200; }.plates { margin: 0; padding: 0; text-align: left; list-style: none; }.plates li { border-bottom: 1px solid rgba(0,0,0,0.2); padding: 10px 0; font-weight: 100; display: flex; }.plates label { flex: 1; cursor: pointer; }.plates input { display: none; }.plates input + label:before { content: '⬜️'; margin-right: 10px; }.plates input:checked + label:before { content: ''; }.add-items { margin-top: 20px; }.add-items input { padding: 10px; outline: 0; border: 1px solid rgba(0,0,0,0.1); }.buttons{ padding-top: 30px; }.buttons input{ padding: 10px; outline: 0; border: 1px solid rgba(0,0,0,0.1); }.buttons input:hover{ cursor: pointer; }

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path d="M495.9,425.3H16.1c-5.2,0-10.1,2.9-12.5,7.6c-2.4,4.7-2.1,10.3,0.9,14.6l39,56.4c2.6,3.8,7,6.1,11.6,6.1h401.7 c4.6,0,9-2.3,11.6-6.1l39-56.4c3-4.3,3.3-9.9,0.9-14.6C506,428.2,501.1,425.3,495.9,425.3z M449.4,481.8H62.6L43,453.6H469 L449.4,481.8z"/><path d="M158.3,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1c-7.8,0-14.1,6.3-14.1,14.1v64.5 C144.2,115.7,150.5,122,158.3,122z"/><path d="M245.1,94.7c7.8,0,14.1-6.3,14.1-14.1V16.1c0-7.8-6.3-14.1-14.1-14.1C237.3,2,231,8.3,231,16.1v64.5 C231,88.4,237.3,94.7,245.1,94.7z"/><path d="M331.9,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1s-14.1,6.3-14.1,14.1v64.5 C317.8,115.7,324.1,122,331.9,122z"/><path d="M9.6,385.2c5.3,2.8,11.8,1.9,16.2-2.2l50.6-47.7c56.7,46.5,126.6,71.9,198.3,71.9c0,0,0,0,0,0 c87.5,0,169.7-36.6,231.4-103.2c5-5.4,5-13.8,0-19.2c-61.8-66.5-144-103.2-231.4-103.2c-72,0-142.2,25.6-199,72.5l-50-47.1 c-4.4-4.1-10.9-5-16.2-2.2c-5.3,2.8-8.3,8.7-7.4,14.6l11.6,75L2.2,370.6C1.3,376.5,4.2,382.4,9.6,385.2z M380.9,230.8 c34.9,14.3,67.2,35.7,95.3,63.6c-10.1,10-20.8,19.2-31.9,27.5c-22.4-3.3-29.6-8.8-30.7-9.7c-4-5.7-11.8-7.7-18.1-4.4 c-6.9,3.6-9.5,12.2-5.9,19.1c1.9,3.5,7.3,10.3,22.4,16c-10.1,5.7-20.5,10.7-31.1,15.1C352.4,320.2,352.4,268.6,380.9,230.8z M36.3,255.6l29.4,27.7c5.3,5,13.6,5.1,19.1,0.3c53.2-47.6,120.7-73.7,190-73.7c26.9,0,53.2,3.9,78.5,11.3 c-29.3,44.6-29.3,102,0,146.6c-25.3,7.4-51.6,11.3-78.5,11.3c-69,0-136.3-26-189.4-73.2c-2.7-2.4-13.4-6.3-19.1,0.3l-30.1,28.3 l5.7-40C42.2,293,36.3,255.6,36.3,255.6z"/><circle cx="398.8" cy="273.8" r="14.1"/></g></svg> <div class="wrapper"> <h2>LOCAL TAPAS</h2> <p></p> <ul class="plates"> <li>Loading Tapas...</li> </ul> <form class="add-items"> <input type="text" name="item" placeholder="Item Name" required> <input type="submit" value="+ Add Item"> </form> <div class = "buttons"> <input type="submit" class = "check__all" value="Check All"> <input type="submit" class = "uncheck__all" value="Uncheck All"> <input type="submit" class = "clear__all" value="Clear All"> </div> </div>

I have tried a few things but none of them work.

Answer 1

This code should work assuming the inputs are checkboxes. If they are not, then please explain what kind of inputs they are and I will adjust the code.

function checkAll () {
  let inputs = document.querySelectorAll("input[type=checkbox]")
  inputs.forEach(item => {
    item.checked = true
  })
}


function uncheckAll () {
  let inputs = document. querySelectorAll("input[type=checkbox]")
  inputs.forEach(item => {
    item.checked = false
  })
}

Answer 2

You can try this

checkboxes.addEventListener('click', checkAll);
uncheckboxes.addEventListener('click', unCheckAll);


function checkAll(e) {
  var listItemChk = document.querySelectorAll('.plates li input');

  if (listItemChk && listItemChk.length > 0) {
    Array.from(listItemChk).forEach(function(inputChk){
      inputChk.checked = true;
    });
  }

}

function unCheckAll(e) {
  var listItemChk = document.querySelectorAll('.plates li input');

  if (listItemChk && listItemChk.length > 0) {
    Array.from(listItemChk).forEach(function(inputChk){
      inputChk.checked = false;
    });
  }

}