使用jQuery检查验证单选按钮

时间:2010-09-23 15:41:51

标签: jquery validation forms radio-button

在我的表格上,我有一组单选按钮。这是标记:

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

提交表单时,我想检查其中一个是否已被选中。最好的方法是什么?我正在考虑循环遍历它们并设置一个标志来设置是否检查其中一个,然后检查循环之后的标志,如果它是false则抛出错误。

欢迎任何帮助,欢呼。

7 个答案:

答案 0 :(得分:20)

您可以将lengthequal attribute selector:checked过滤器选择器一起使用,如下所示:

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

答案 1 :(得分:5)

<强>演示

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

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

答案 2 :(得分:4)

试试jQuery Validation插件。它可以为你做很多事情,并且对很多不同形式非常有用。如果你想简单地做到这一点:

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

答案 3 :(得分:2)

尝试:

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/

答案 4 :(得分:2)

真的老了,我知道。如果未选择无线电选择,则返回“未定义”,而不是“0”。在我的例子中,我声明了一个带有单选按钮值的变量。如果所述值未定义,则javascript返回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;
}    

答案 5 :(得分:1)

我认为$('input[name=fileType]:checked').length可以解决问题。

答案 6 :(得分:0)

您可以检查已检查的单选按钮名称是否在jQuery中返回值:

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