CODEWITHSUNDEEP
javascriptradio-button
JohnA
JohnA

Reputation: 1913

Javascript check if radio button was checked?

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.

Upvotes: 4

Views: 84172

Answers (6)

SpYk3HH
SpYk3HH

Reputation: 22570

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;
    }
}

Upvotes: 1

Anonymous
Anonymous

Reputation: 4632

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/

Upvotes: 1

RobG
RobG

Reputation: 147403

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.

Upvotes: 1

Oliver
Oliver

Reputation: 551

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 .');
}

Upvotes: 6

Zen Pak
Zen Pak

Reputation: 578

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;     
    }
}

Upvotes: 0

Kevin
Kevin

Reputation: 1157

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;

Upvotes: 2

Related Questions