CODEWITHSUNDEEP
jqueryvalidationformsradio-button
Will
Will

Reputation: 11171

Validating a radio button is checked with jQuery

On my form I havea set of radio buttons. Here's the mark up:

<div class="optionHolder">
    <p class="optionName">Format</p>
    <div class="option checked">
        <input type="radio" name="fileType" value="avi" />
        <img src="images/avi.png" alt="" />
        <label>AVI</label>
    </div>
    <div class="option">
        <input type="radio" name="fileType" value="mov" />
        <img src="images/mov.png" alt="" />
        <label>MOV</label>
    </div>
    <div class="option">
        <input type="radio" name="fileType" value="mp4" />
        <img src="images/mp4.png" alt="" />
        <label>MP4</label>
    </div>
    <div class="option">
        <input type="radio" name="fileType" value="mp3" />
        <img src="images/mp3.png" alt="" />
        <label>MP3</label>
        </div>
</div>

When the form is submitted I want to check that one of them is checked. What's the best way to go about this? I was thinking of looping through them all and making a flag to set if one of them is checked, and then check the flag after the loop and if it's false throw an error.

Any help is appreciated, cheers.

Upvotes: 5

Views: 54083

Answers (7)

David Aguirre
David Aguirre

Reputation: 1410

Really old, I know. If a radio selection is not selected it returns as 'undefined', not '0'. In my example I declare a variable with the value of the radio buttons. If said value is undefined, the javascript returns false. 

gender = $('input[name=gender]:checked').val();

if(typeof gender === 'undefined'){
    alert('Do not move on');
    $('input[name=gender]').css('box-shadow', '0 0 2px 0 red');
    return false;
}

Upvotes: 2

Praveen Prasad
Praveen Prasad

Reputation: 32137

demo

http://jsfiddle.net/Vq2jB/2/

var isChecked = jQuery("input[name=fileType]:checked").val();

Upvotes: 5

Naveed
Naveed

Reputation: 42143

Try:

var checkbox = $("input[@name='fileType']:checked");

if( checkbox.length > 0 ) {
    alert( checkbox.val() ); // checkbox value
} else {
    alert('Please select a format'); // error
}

http://jsfiddle.net/wE4RD/

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382881

You can use the length and equal attribute selector with :checked filter selector like this:

if ($("input[name='fileType']:checked").length > 0){
  // one ore more checkboxes are checked
}
else{
 // no checkboxes are checked
}

Upvotes: 21

Andy Rose
Andy Rose

Reputation: 17014

You could check to see if the checked radio button name returns a value in jQuery:

if($("input[@name='fileType']:checked").val() != null){
    // button checked
}

Upvotes: 0

janosrusiczki
janosrusiczki

Reputation: 1931

I think $('input[name=fileType]:checked').length will do the trick.

Upvotes: 1

ICodeForCoffee
ICodeForCoffee

Reputation: 3226

Try the jQuery Validation plugin. It can do a lot for you and be really useful for lots of different forms. If you want to do it very simply:

if($("input[name=fileType]:checked").length > 0) {
   //Is Valid
}

Upvotes: 4

Related Questions