使用 jQuery 检查验证单选按钮

Posted 2023-03-05

【中文标题】使用 jQuery 检查验证单选按钮

【英文标题】：Validating a radio button is checked with jQuery

【发布时间】：2011-04-16 08:30:12

【问题描述】：

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

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

提交表单时，我想检查其中一个是否已被选中。解决这个问题的最佳方法是什么？我正在考虑循环遍历它们并设置一个标志以设置其中一个是否被选中，然后在循环后检查标志，如果它为假则抛出错误。

感谢您的帮助，干杯。

【参考方案1】：

您可以将length 和equal attribute selector 与:checked 过滤器选择器一起使用，如下所示：

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

else
 // no checkboxes are checked

【讨论】：

你需要检查长度为> 0，而不是刚刚定义

我做到了。我没有投反对票。您需要将其与零进行比较。只需检查 if(.length) 即可检查它是否已定义。当设置为 0 时，它仍然被定义。此代码不会始终如一地工作。

@Josh Stodola：按照你说的修改:)

【参考方案2】：

演示

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

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

【讨论】：

您的方式可行，但如果未选择任何内容，您的 isChecked 将变为未定义而不是 false。如果我要去所有的 var isChecked，我希望它是真或假。不正确或未定义。是的，如果我去 if isChecked ，它的工作方式是一样的，但无论如何我感觉有点不对劲。

我添加了一个演示并解决了这个问题。

【参考方案3】：

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

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

【讨论】：

@kitsched 这样的问题很快就会得到解答！

【参考方案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/

【参考方案5】：

真的老了，我知道。如果未选择单选，则返回“未定义”，而不是“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;
    

【参考方案6】：

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

【参考方案7】：

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

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

【讨论】：

-1 否，val() 在没有找到任何元素时返回null，当然null !== ""

为什么null还在？