Let only mark a dynamic Checkbox table

Asked

Viewed 523 times

-1

I have a table, I create it dynamically, I need the user to manage to mark only one checkbox, That’s when one has scored, the time he goes to score another, he unmakes the other, and marks the new. I add this field to the table this way:

  + "<td>" + "<input type='checkbox' class='link-check' />" + "</td>"
javascript ajax

  • Have you tried warpar the table in a form and use a radio button instead of a checkbox?

  • I didn’t try, how can I?

  • Place the table inside a form tag, like any form, and use radio Buttons instead of checkbox. He does exactly that, when you score one, the other skips.

  • 1

    https://www.w3schools.com/html/html_forms.asp if you have any doubts about how to implement, but it is extremely simple. Edit: actually, from what I’m seeing here, you don’t even have to put in a form, just put the same "name" on all the radio Buttons that they’re linked to, so when you mark each other uncheck.

  • It was requested by checkbox, because of aesthetics, in case the function is not possible, I will try this way.

  • It’s possible, it’s just more work. I’ll check here and I’ll answer you, if no one answers before.

  • 1

    https://stackoverflow.com/questions/19362284/uncheck-a-checkbox-if-another-checked-with-javascript .

  • You can use radio Buttons as already suggested, think about the functionality. The aesthetic question you can change with CSS to do the radio look like a checkbox.

Show 3 more comments

1 answer

1


Translating the answer from here(adapted):

+ "<td>" + "<input type='checkbox' class='link-check' onchange="cbChange(this)" />" + "</td>"

// ...

function cbChange(obj) {
  var cbs = document.getElementsByClassName("link-check");
  for (var i = 0; i < cbs.length; i++) {
     if(cbs[i] !== obj) cbs[i].checked = false;
   }
}

Basically, what was done was the following: The function takes all checkboxes with the 'link-check' class, and puts them in the cbs array. Iterate on all of them, uncheck all of them, and then mark just the one that was clicked. Then add this function in an onchange event to all checkboxes so it works on all of them.

I hope it helps.

  • He is returning me the following message, cbs.foreach is not a Function.

  • Did you ever check whether Document.getElementsByClassName is capturing checkboxes? Try giving a console.log(cbs) to see the content. foreach will only work if the variable is an array. If you prefer you can make a common loop instead of the foreach, I did so because it is more readable.

  • I gave aconsole.log(cbs) and returned: HTMLCollection [input.link-check]

  • And when using the foreach it returned that error? I will edit with a normal for you to try again, a sec.

  • It worked, but that way I can’t clear the checkbox ?

  • From what I understand, you wanted something like a radio button in the form of a checkbox, didn’t you? You want to be able to uncheck them all as well?

  • I wanted to have the option that if the checkbox is marked, then it click on top again, it also uncheck.

  • edited again, see if it helps.

  • I tested it here and it doesn’t work, I’ll check here and I’ll get back to you.

  • I’m testing too, let’s see, thank you.

  • I managed to make it work, I edited there.

  • Thank you so much for the help, now it worked right.

Show 7 more comments

Browser other questions tagged javascript ajax

You are not signed in. Login or sign up in order to post.