I am currently working on developing a to-do list where each item includes a checkbox. My goal is to be able to select these checkboxes individually by clicking on them. Furthermore, I would like the checkboxes to toggle between being checked and unchecked when clicked on multiple times.
To implement this functionality, I have set up a basic structure with an input field and an add button. Upon clicking the add button, a new row is added to the table using the appendChild method. I have also created and appended all the necessary elements to ensure that the newly added row displays correctly, including the checkboxes.
However, a challenge arises when I try to select multiple checkboxes across different rows. While the functionality works flawlessly when only a single checkbox is present, it does not work as expected when there are multiple checkboxes involved.
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>