Javascript check if radio button was checked?

Question

I have found scripts that do it, but they only work with one radio button name, i have 5 different radio button sets. How can i check if its selected right now i tried on form submit

if(document.getElementById('radiogroup1').value=="") {
        alert("Please select option one");
        document.getElementById('radiogroup1').focus();
        return false;
    }

does not work.

Answer 1

If you have your heart set on using standard JavaScript then:

Function definition

var isSelected = function() {
    var radioObj = document.formName.radioGroupName;

    for(var i=0; i<radioObj.length; i++) {
        if( radioObj[i].checked ) {
            return true;
        }
    }

    return false;
};

Usage

if( !isSelected() ) {
    alert('Please select an option from group 1 .');
}   

I'd suggest using jQuery. It has a lot of selector options which when used together simplify the much of the code to a single line.

Alternate Solution

if( $('input[type=radio][name=radioGroupName]:selected').length == 0 ) {
    alert('Please select an option from group 1 .');
}

Answer 2

var checked = false, radios = document.getElementsById('radiogroup1');
for (var i = 0, radio; radio = radios[i]; i++) {
    if (radio.checked) {
        checked = true;
        break;
    }
}

if (!checked) {
    alert("Please select option one");
    radios.focus();
    return false;
}

return true;

Answer 3

Why don't just use a oneliner?

I wrote this code, it will submit the form if at least one radio is checked:

(function(el){for(var i=el.length;i--;) if (el[i].checked) return el[i].form.submit()||1})(document.form_name.radio_name)||alert('please select item')

Otherwise it will make an alert. Or you may also modify it to use with form's onsubmit:

return (function(el){for(var i=el.length;i--;) if (el[i].checked) return 1})(document.form_name.radio_name)||alert('please select item')

Just replace form_name and radio_name accordingly.

See how it works: http://jsfiddle.net/QXeDv/5/

Answer 4

Here's a good tutorial -> http://www.somacon.com/p143.php

---

// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
function getCheckedValue(radioObj) {
    if(!radioObj) return "";
    var radioLength = radioObj.length;
    if(radioLength == undefined)
        if(radioObj.checked) return radioObj.value;
        else return "";
    for(var i = 0; i < radioLength; i++) {
        if(radioObj[i].checked) return radioObj[i].value;
    }
    return "";
}

// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
    if(!radioObj) return;
    var radioLength = radioObj.length;
    if(radioLength == undefined) {
        radioObj.checked = (radioObj.value == newValue.toString());
        return;
    }
    for(var i = 0; i < radioLength; i++) {
        radioObj[i].checked = false;
        if(radioObj[i].value == newValue.toString()) radioObj[i].checked = true;
    }
}

Answer 5

A very simple function is:

<script type="text/javascript">

function checkRadios(form) {
   var btns = form.r0;
   for (var i=0; el=btns[i]; i++) {
     if (el.checked) return true;
   }
   alert('Please select a radio button');
   return false;
}
</script>

<form id="f0" onsubmit="return checkRadios(this);">
  one<input type="radio" name="r0"><br>
  two<input type="radio" name="r0"><br>
  three<input type="radio" name="r0"><br>
  <input type="submit">
</form>

However, you sould always have one radio button selected by default (i.e. with the select attribute), some user agents may automatically select the first button. Then you just need to check if the default (usually the first one) is checked or not.

Answer 6

Are you ok with jquery? If so:

$(document).ready(function(){
    if($('input[type=radio]:checked').length == 0)
    {
        alert("Please select option one");         
        document.getElementById('radiogroup1').focus();         
        return false;     
    }
}