使用jQuery验证单选按钮是否已选中

Question

在我的表单上有一组单选按钮。以下是标记：

<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则抛出错误。

任何帮助都将不胜感激，谢谢。

- Will

Answer 1

你可以像这样使用 :checked 过滤选择器与 等于属性选择器 以及 length：

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

- Sarfraz

---

你需要检查长度是否大于0，而不仅仅是定义了。 - Josh Stodola

我做了。我没有给它投反对票。你需要将其与零进行比较。只需检查if（.length）是否定义。当设置为0时，它仍然被定义。这段代码无法始终正常工作。 - Josh Stodola

@Josh Stodola：根据你的建议进行了修改 :) - Sarfraz

Answer 2

demo

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

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

- Praveen Prasad

---

你的方法是可行的，但如果没有选择任何内容，isChecked会返回undefined而不是false。如果我要使用isChecked变量，我希望它只能是true或false，而不是true或undefined。是的，如果我使用if isChecked语句，它也可以正常工作，但无论如何，这种方式对我来说都有点奇怪。 - ICodeForCoffee

我已经添加了一个演示并解决了那个问题。 - Praveen Prasad

Answer 3

尝试使用jQuery Validation插件。它可以为您做很多事情，并且对许多不同的表单非常有用。如果您想要非常简单地完成它：

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

- ICodeForCoffee

---

@kitsched 这样的问题很快就会得到答复！ - ICodeForCoffee

Answer 4

尝试：

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/

- Naveed

Answer 5

确实有点老了。如果没有选择单选框，则返回“undefined”而不是“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;
}    

- David Aguirre

Answer 6

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

- janosrusiczki

Answer 7

你可以使用jQuery来检查选中的单选按钮是否返回一个值：

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

- Andy Rose

---

-1 不，当没有找到元素时，val() 返回 null，而且 null !== ""。 - Josh Stodola

为什么 null 还在那里？ - Fabio Milheiro