Validating a radio button is checked with jQuery

Question

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.

Roseboro

Answer 1

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
}

Flowerer

You need to check length to be > 0, not just defined – Bullington

I did. And I did not down-vote. You need to compare it with zero. Just checking if(.length) checks if it is defined or not. When set to 0, it is still defined. This code does will not work consistently. – Bullington

@Josh Stodola: Modified as per what you said :) – Flowerer

Answer 2

demo

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

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

Reed

Your way works, but if nothing is selected, your getting undefined instead of false for isChecked. If I'm going to all the var isChecked, I want it to be either true or false. Not true or undefined. Yes, if I go if isChecked it works the same way, but it feels slightly off to me anyway. – Ditheism

i have added a demo and fixed that problem. – Reed

Answer 3

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
}

Ditheism

@kitsched Questions like this get answered really fast! – Ditheism

Answer 4

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/

Eri

Answer 5

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

Purveyor

Answer 6

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

Barri

Answer 7

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
}

Retrospection

-1 No, val() returns null when no elements are found, and certainly null !== "" – Bullington

Why is the null still there? – Application