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="m开发者_StackOverflowov" />
<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.
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
}
demo
http://jsfiddle.net/Vq2jB/2/
var isChecked = jQuery("input[name=fileType]:checked").val();
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
}
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/
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;
}
I think $('input[name=fileType]:checked').length
will do the trick.
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
}
精彩评论