Как я могу реализовать проверку всех, снять все, и очистить все параметры для списка флажков? ⇐ Html

[Anonymous]

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

• Check ALL boxes - Taco All
• Uncheck ALL boxes - Untaco All
• Clear ALL boxes - Remove all the 'dishes' in the menu added

Я борюсь с этим. Мой код работает, чтобы добавить элементы в список при введении, но мой код для выполнения любой из вышеперечисленных команд не. Как сделать это с помощью 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 `
[*]

${plate.text}

`;
}).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);< /code>
html {
box-sizing: border-box;
background: url('') 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;
}< /code>


LOCAL TAPAS

• Loading Tapas...

< /code>
< /div>
< /div>
< /p>

Я пробовал несколько вещей, но никто из них не работает. < /p>

Подробнее здесь: https://stackoverflow.com/questions/585 ... a-checkbox