Click here to Skip to main content
15,796,102 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have created a table with some data in each column and with a checkbox in the last column (for each row). The checkbox it is made with CSS and a bit of JS.
I notice that even if I was able to display all the data properly(checkboxes included) , when I click in whatever checkbox element, only one of them (and always the same) got checked ( basically changed the style).
Why this behaviour? I would like to have each checkboxes to work indipendently.
Any idea?

These are the main parts of my code (CSS excluded). Everytime a checkbox is checked it should basically change its style. As I mentioned before, just one got changed... always the first one, even if I click on others.

const checkbox = document.createElement("checkbox");
     checkbox.innerHTML = `
     <label class="checkbox" for="myCheckboxId">
       <input class="checkbox__input" type="checkbox" name="myCheckboxName" id="myCheckboxId">
       <div class="checkbox__box"></div>

for (const row of datas.rows){

What I have tried:

Tried with some controls.... but I got stuck and more confused.
Updated 7-Jul-22 0:01am

1 solution

This is probably because you're giving all of the <input> elements the same id. The HTML - The id attribute[^] is supposed to be unique on a web-page, so having a <label> with a for attribute for an id that isn't unique is going to behave strangely (I think browsers might handle this scenario differently).

Just give each input a unique id attribute value and change the corresponding for attribute value in the label. This could be done by appending a number or index (ie. if it's in a table, you could append the id with the row number of the table.)
Share this answer
JackF007 7-Jul-22 5:02am    
Chris you're supporting my project a lot, so,first of all, thank you very much.
I would like not to use a different checkbox for each row as the row number could be different each time I load the page.

I want to apply your tip... as you can see I have used the checkbox as an innerHTML that took the content of the element with the id="myCheckboxId". Then I loop through each row here:
for (const row of datas.rows){

How I suppose to change the index of the checkbox for each row?
If I try something like this in the for loop:
document.getElementById("myCheckboxId").setAttribute("id", "myCheckboxId2");

it will change the id of the checkbox, but I guess it will not apply the CSS style for the class (each time the checkbox is clicked I basically change the style to see if checked or not), isn't it? Something like this:
.checkbox__input:checked + .checkbox__box{

So as you said I should change the for attribute too.... to do that, do I need to setup for for each unique checkbox the style, the attributes etc?
Chris Copeland 7-Jul-22 5:10am    
No, the CSS example you've provided is using the . selector which means "elements with this class", not by using ID. In CSS using .example would match to elements with class="example" while #example would match elements with id="example" (this is basic CSS knowledge, so if you're unsure or confused on this then you might need to look at some CSS tutorials)

To answer your question about changing the IDs, you assign the ID in the HTML part of the script you provided. What you probably need to do is either use an ID column that is returned from the request response, or just have a var counter somewhere in the script outside of the loop where you add the checkbox HTML. You can increment the counter for each row, and make sure to append it to the id attribute. See this example for how you can append the counter[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900