Javascript 选中/取消选中所有按钮有什么问题?
我正在学习Wes Bos 30天Javascript课程,在一个可选功能上,我需要添加底部的三个按钮:全部清除、全部选中和全部取消选中。 这是密码Javascript 选中/取消选中所有按钮有什么问题?,javascript,local-storage,Javascript,Local Storage,我正在学习Wes Bos 30天Javascript课程,在一个可选功能上,我需要添加底部的三个按钮:全部清除、全部选中和全部取消选中。 这是密码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LocalStorage</title> <link rel="stylesh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LocalStorage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--
Fish SVG Cred:
https://thenounproject.com/search/?q=fish&i=589236
-->
<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">
<hr />
<button type="button" name="clearAll">Clear all</button>
<button type="button" name="checkThemAll">Check all</button>
<button type="button" name="uncheckThemAll">Uncheck all</button>
</form>
</div>
<script>
const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = JSON.parse(localStorage.getItem('items')) || [];
const buttons = document.querySelectorAll('[type=button]')
function addItem(e) {
e.preventDefault();
const text = (this.querySelector('[name=item]')).value
const item = {
text,
done: false
}
items.push(item);
populateList(items, itemsList)
this.reset();
localStorage.setItem('items', JSON.stringify(items))
}
function populateList(plates = [], platesList){
platesList.innerHTML = plates.map((plate, i) => {
return `
<li>
<input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : null} />
<label for="item${i}">${plate.text}</label>
</li>
`
}).join('');
}
function toggleDone(e){
if (!e.target.matches('input')) return;
const el = e.target;
const index = el.dataset.index;
items[index].done = !items[index].done;
localStorage.setItem('items', JSON.stringify(items));
populateList(items, itemsList);
}
function clearOptions() {
if (this.name === "clearAll"){
localStorage.removeItem('items');
items.splice(0, items.length)
} else if( this.name === "checkThemAll"){
items.map(item => {
item.done = "true";
})
localStorage.setItem('items', JSON.stringify(items));
} else if (this.name === "uncheckThemAll"){
items.map(item => {
item.done = "false";
})
localStorage.setItem('items', JSON.stringify(items));
} else return;
populateList(items, itemsList)
console.table("ITEMS", items)
console.table("LOCALSTORAGE", localStorage)
}
addItems.addEventListener('submit', addItem);
itemsList.addEventListener('click', toggleDone);
buttons.forEach(button => button.addEventListener('click', clearOptions));
populateList(items, itemsList);
</script>
</body>
</html>
本地存储
本地小吃
- 正在加载Tapas
清除所有
全部检查
全部取消选中
const addItems=document.querySelector('.addItems');
const itemsList=document.querySelector('.plates');
const items=JSON.parse(localStorage.getItem('items'))| |[];
const buttons=document.querySelectorAll(“[type=button]”)
函数附加项(e){
e、 预防默认值();
常量文本=(this.querySelector('[name=item]')).value
常数项={
文本,
完成:错误
}
项目。推送(项目);
大众列表(项目,项目列表)
这是reset();
localStorage.setItem('items',JSON.stringify(items))
}
函数populateList(plates=[],platesList){
platesList.innerHTML=plates.map((plate,i)=>{
返回`
${plate.text}
`
}).加入(“”);
}
功能切换完成(e){
如果(!e.target.matches('input'))返回;
常数el=e.目标;
const index=el.dataset.index;
项目[索引]。完成=!项目[索引]。完成;
setItem('items',JSON.stringify(items));
大众列表(项目,项目列表);
}
函数clearOptions(){
如果(this.name==“clearAll”){
localStorage.removietem('items');
项目.拼接(0,项目.长度)
}else if(this.name==“checkThemAll”){
items.map(item=>{
item.done=“true”;
})
setItem('items',JSON.stringify(items));
}else if(this.name==“uncheckThemAll”){
items.map(item=>{
item.done=“false”;
})
setItem('items',JSON.stringify(items));
}否则返回;
大众列表(项目,项目列表)
控制台.表格(“项目”,项目)
console.table(“LOCALSTORAGE”,LOCALSTORAGE)
}
addItems.addEventListener(“提交”,addItem);
itemsList.addEventListener(“单击”,切换完成);
buttons.forEach(button=>button.addEventListener('click',clearOptions));
大众列表(项目,项目列表);
如果有人能告诉我为什么我的“全选”和“取消全选”按钮不能正常工作,我将不胜感激。它们都选中所有项,但不取消选中任何项。当I console.log时,项和本地存储似乎工作正常
谢谢 您使用的是字符串,而不是布尔值:
item.done=“false”
应该是:
item.done=false
看到它在这里工作:
因为您使用的是字符串,所以它是一个真实值,因此它的计算结果将为
true
,如果您还提供了一个在线游乐场来复制此问题,这将非常有用