Clicking within the label container holding the input tag checks and unchecks the checkbox...?

Steven Parker Your response helped me investigate further to resolve the issue. However, I thought the best solution was to change the <label> tag to a <p> tag, and the respective "label" selectors to "p" selectors in CSS because it required the least amount of changes while maintaining the same HTML layout and expected functionality of the app.

I tried your suggestion of making <checkboxInput> a sibling of <label> and it worked. However, making that change resulted in the checkbox shifting below "Confirmed", and when the checkbox was checked, the text "Confirmed", shown on all of the list items were highlighted blue, not the particular list item container the checkbox was wrapped in.

With that in mind, I did not choose the "best answer" to be the answer I provided simply because it was my answer and it worked. I chose it because I thought the "best answer", or the easiest fix to resolve the issue, was to change the <label> tag to a <p> tag, and the respective "label" selectors to "p" selectors in CSS.

Since you provided only JavaScript code, I had to construct some HTML to go with it for testing. The effects you mention did not appear in my testing. If you had provided the actual complete code I could have given you more accurate suggestions that would not have had the side-effects you mention.

Changing the tag type might work in this case; but it alters the intention of the code, and could potentially have even more significant side effects. I would not recommend it as a general practice to resolve similar issues in real-world situations.

my label elements do not contain a "for" attribute. Yet by clicking within the label container, it is still able to act as a trigger to check and uncheck boxes. Here is the following code snippet of creating a list element and the change delegating handler. The code is essentially the same as what Guil coded prior to refactoring. Does this help?

// create list element

function createLi(invitee) {
const li = document.createElement('li');

const span = document.createElement('span');
span.textContent = invitee; // replaced li.textContent with span to convert text element to HTML element
li.appendChild(span);

const label = document.createElement('label');
label.textContent = 'Confirmed';
li.appendChild(label);

const checkboxInput = document.createElement('input');
checkboxInput.type = 'checkbox';  label.appendChild(checkboxInput);

const editButton = document.createElement('button');
editButton.textContent = 'edit'
li.appendChild(editButton);

const removeButton = document.createElement('button');
removeButton.textContent = "remove";
li.appendChild(removeButton);

return li;

}

// change event for checkbox

ul.addEventListener("change", (e) => {
const checkboxInput = e.target; 
const checked = checkboxInput.checked; // returns a boolean
const li = checkboxInput.parentNode.parentNode; // DOM traversal to <label> then to <li>
if (checked) {
  li.className = "responded";
} else {
  li.className = '';
}

})