Checkboxes clickable but not indipendent

Question

0.00/5 (No votes)

See more:

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.classList.add("table-refresh__checkbox");
     checkbox.innerHTML = `
     <label class="checkbox" for="myCheckboxId">
       <input class="checkbox__input" type="checkbox" name="myCheckboxName" id="myCheckboxId">
       <div class="checkbox__box"></div>
     </label>
     `;

for (const row of datas.rows){
        row.push(checkbox.innerHTML)
        }

What I have tried:

Tried with some controls.... but I got stuck and more confused.

Posted 6-Jul-22 4:53am

JackF007

Updated 6-Jul-22 23:01pm

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Chris Copeland · Answer 1 · 2022-07-06T05:27:00

Solution 1

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.)

Posted 6-Jul-22 5:27am

Chris Copeland

Comments

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){
row.push(checkbox.innerHTML)
}

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{
background:#2266dc;
border-color:#2266dc

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[^]