我试图创建一个待办事项列表,每个项目都有一个复选框,我想在单击这些复选框时选中它们。如果我再次单击其中任何一个,则该框应根据我单击的框在选中和未选中之间切换。
我创建了这个输入结构和一个添加按钮。当我单击add按钮时,一个表行被添加到表中(使用appendChild)。我创建并添加了所需的其他元素。所以现在当我点击添加按钮时,表格行会正确显示。它显示了其中的所有元素,包括复选框。
当我创建多个行时,问题出现了,我不能选中所有的复选框。如果只有一个复选框,它工作得很好。但对于多个复选框,不会选中所有复选框
const addButton = document.querySelector(".search_add_container button");
const table = document.querySelector("table");
addButton.addEventListener("click", function() {
var inputValue = document.getElementById("inputContent");
var tableRow = document.createElement("tr");
var dataCell = document.createElement("td");
var dataCellInnerContainer = document.createElement("div");
dataCellInnerContainer.className = "data_cell_container";
var tableCheckboxes = document.createElement("div");
tableCheckboxes.className = "checkbox_box";
var img = document.createElement("img");
img.src = "starGrey.png";
img.alt = "starGrey";
var cellHeader = document.createElement("h5");
cellHeader.className = "cell_header";
var cellTent = document.createElement("h5");
cellTent.className = "cell_tent";
var time = document.createElement("p");
if (inputValue.value == "") {
alert("Please add a note!");
} else {
cellHeader.innerText = inputValue.value;
cellTent.innerText = inputValue.value;
time.innerText = new Date().toLocaleTimeString([], {
hour: '2-digit',
minute: "2-digit"
});
table.appendChild(tableRow);
tableRow.appendChild(dataCell);
dataCell.appendChild(dataCellInnerContainer);
dataCellInnerContainer.appendChild(tableCheckboxes);
dataCellInnerContainer.appendChild(img);
dataCellInnerContainer.appendChild(cellHeader);
dataCellInnerContainer.appendChild(cellTent);
dataCellInnerContainer.appendChild(time);
inputValue.value = "";
}
var checkboxes = document.querySelectorAll(".data_cell_container .checkbox_box");
checkboxes.forEach(checkbox => {
checkbox.addEventListener("click", () => {
if (checkbox.classList.contains("checked")) {
checkbox.classList.remove("checked");
} else {
checkbox.classList.add("checked");
}
});
});
inputValue.value = "";
});
table {
width: 100%;
}
tr td {
position: relative;
display: table-cell;
vertical-align: center;
border: 1px solid black;
}
td.checked {
text-decoration: line-through;
}
.data_cell_container {
position: relative;
display: grid;
grid-template-columns: 30px 30px calc(250px - 80px) auto 65px;
grid-gap: 5px;
padding: 5px 0 5px 20px;
}
.data_cell_container {
position: relative;
padding: 8px 20px;
}
.checkbox_box {
position: relative;
width: 16px;
height: 16px;
border: 2px solid #BABCBE;
background-color: transparent;
cursor: pointer;
}
.checkbox_box.checked::after {
content: '';
position: absolute;
left: 3px;
height: 4px;
width: 10px;
border-left: 2px solid #BABCBE;
border-bottom: 2px solid #BABCBE;
transform: rotate(-45deg);
transform-origin: bottom;
}
.cell_header {
max-width: calc(250px - 100px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cell_tent {
max-width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.data_cell_container p {
font-size: smaller;
font-weight: bolder;
}
<header>
<div class="search_add_container">
<input type="text" placeholder="Add New List Item" id="inputContent">
<img src="search.png" alt="searchicon">
<button>Add</button>
</div>
</header>
<div class="table_container">
<table>
</table>
</div>
2条答案
按热度按时间whhtz7ly1#
每次单击Add按钮(在适当的情况下,您知道),前面的每个复选框都会获得一个额外的事件侦听器。也就是说,第一次,它是确定的,只有一个事件监听器的复选框。
第二次,firstcheckbox为click事件获取两个事件监听器(本质上是相同的)。所以只要你选中复选框,它就会被取消选中(如果选中,取消选中你的代码)。
第三次,第一个复选框得到三个事件监听器,它们本质上是相同的,所以你点击它,它被选中,第二个事件监听器发现它被选中,所以取消选中,第三个事件监听器发现它被选中,所以取消选中。
因此,这里是我的建议,以避免事件侦听器的积累:
为什么我使用一个新变量而不是
indexOf()
是因为如果数组中有多个类似的实体,它将不会返回所需的值。lastIndexOf()
也是如此。希望你觉得这有用。
92vpleto2#
这是因为在一个复选框上有多个单击处理程序。相反,做这个-
这里,只选择最后一个元素(刚添加的元素)。