Home / Questions / 291136
Accepted
Antonio Ruiz
Asked: 2020-09-08 00:39:29 +0800 CST 2020-09-08 00:39:29 +0800 CST

How to validate a checkbox group with javascript?

  • 772

I want to validate that at least one checkbox of a group is selected, but I don't know their ids or names since they are dynamic, they change. What if is the name or id of the div that encompasses them. I can do it?

<div class="group-check1">
<input type="checkbox"> Opc 1
<input type="checkbox"> Opc 2
<input type="checkbox"> Opc 3
</div>

I have two groups of checkboxes, independent, in both there must be at least 1 check selected.

javascript

1 Answers

  1. Best Answer

    As @aloMalbarez points out, to verify if one is ckecked, it would only be necessary with the selector:

    const alguno = !!document.querySelector(".group-check1 input[type=checkbox]:checked");

console.log(alguno)
    <div class="group-check1">
  <input type="checkbox" checked> Opc 1
  <input type="checkbox"> Opc 2
  <input type="checkbox"> Opc 3
</div>

    If, in addition, some other condition had to be verified, in addition to the mere existence, using querySelectorAll(".group-check1 input")together with some()would be useful

    const alguno = [...document.querySelectorAll(".group-check1 input")].
some(o=>(o.checked || (o.id==="uno")));

console.log(alguno)
    <div class="group-check1">
  <input id="uno" type="checkbox" checked> Opc 1
  <input id="dos" type="checkbox"> Opc 2
  <input id="tres" type="checkbox"> Opc 3
</div>

    It is necessary to clarify that at the moment of writing this, with a selector we can verify if an attribute exists or not in time, but if it had a value, only its initial value. If we wanted to make a selector to check a certain value of valuefor example one input type='text', we could just make a selector to check the initial value, but not its changes. In the case of the checkbox we can do it because we verify if the attribute exists or not, not the value.

    • 5