How to loop through a radio buttons group without a form?

Question

How do I loop through a radio buttons group without a form in JavaScript or jQuery?

Solution 1

What about something like this? (using jQuery):

$('input:radio').each(function() {
  if($(this).is(':checked')) {
    // You have a checked radio button here...
  } 
  else {
    // Or an unchecked one here...
  }
});

You can also loop through all the checked radio buttons like this, if you prefer:

$('input:radio:checked').each(function() {
   // Iterate through all checked radio buttons
});

Solution 2

...in case someone wants to do this without jQuery (since it was part of the question):

I'm not sure what you mean by without a form. If you mean you don't want to pass the form element to a javascript function, you could do it like this:

for (var i = 0; i < document.form_name.radio_name.length; i++) {
    if (document.form_name.radio_name[i].checked) {
        // ...
    }
}

If you mean without a form as in you have no form node, you could wrap them in a span (or a div) and use code like this:

var span = document.getElementById("span_id");
var inputs = span.getElementsByTagName("input");
for (var i = 0; i < inputs.length; ++i) {
    if (inputs[i].checked) {
        // ...
    }
}

Solution 3

I can't be too sure what you mean but if you want to do something to all radio buttons on a page you can do this:

$("input:radio").each(function(){
   //do something here
});

Comments

[Topera]

The selector "radio" will return nothing. There's no element (tag) called "radio" in HTML. It's <input type="radio">

[Dumb Guy]

$(':radio') is equivalent to $('[type=radio]'). api.jquery.com/radio-selector

[Daniel Vassallo]

@Dumb Guy: I think @Topera was referring to a previous edit, which was fixed by @Razor Storm

[Razor Storm]

@Daniel & Dumb Guy, yeah I made a mistake earlier and corrected it after realizing.