Question

my html looks like this

<div id="div1">
  <input type="radio" name="r1" value="v1" />
  <input type="radio" name="r1" value="v2" />
  <input type="radio" name="r1" value="v3" />

  <input type="radio" name="r2" value="v1" />
  <input type="radio" name="r2" value="v2" />
  <input type="radio" name="r2" value="v3" />

  <input type="radio" name="r3" value="v1" />
  <input type="radio" name="r3" value="v2" />
  <input type="radio" name="r3" value="v3" />
</div>

radio buttons are dynamically generated on my html so in that div i don’t know how many radio buttons i have.

i want to make sure that the user will select a value for each one of them before he submits the form, how can i check that all radio buttons inside my div has a value checked?

Thank you

Answer 1

Restructure your HTML slightly – wrap each radio group in (say) a div. Then you can just do something like this to validate the form when the user submits it:

if ($('div:not(:has(:radio:checked))').length) {
    alert("At least one group is blank");
}

Of course this can be tweaked in various ways to suit your HTML. The idea was from Find all radio groups which haven't been selected