Question

下面我有一个单选按钮组的示例，我试图验证是否已经检查过一个，我使用.each()函数的原因是添加额外的输入以便函数可以循环他们。 jsFiddle

HTML

<table class="application entitlement">
    <tbody><tr>
        <td><label for="entitlement">Yes</label><input type="radio" value="yes" name="entitlement"></td>
        <td><label for="entitlement">No</label><input type="radio" value="no" name="entitlement"></td>
    </tr>
    </tbody>
</table>
<a href="#" class="send-application">Submit Application</a>

的jQuery

$('body').on('click', '.send-application', function(e){
        e.preventDefault();
        var isFormValid = true;
        $('input[name=entitlement]').each(function(index, elem){
            if (!$(this).is(':checked').val()) {
                $(this).css({'box-shadow': '0 0 5px rgba(255,0,0,0.4)'});
                isFormValid = false;
            } else {
                $(this).css({'box-shadow': 'none'});
            }
        });
    });

Answer 1

你的逻辑存在缺陷。 isFormValid始终设置为false，因为您永远无法检查广播组中的所有按钮。

不是循环每一个，只需检查整个集合，看看是否有任何选中：

var $radioButtons = $('input[name=entitlement]');

if ( !$radioButtons.filter(':checked').length ) {
    isFormValid = false;
    $radioButtons.css('box-shadow', '0 0 5px rgba(255, 0, 0, 0.4)');
} else {
    $radioButtons.css('box-shadow', 'none');
}

Here's a fiddle

Answer 2

尝试使用：

if (!$(this).is(':checked')) {

而不是：

if (!$(this).is(':checked').val()) {

<强> Updated Fiddle

根据您的评论，您可以使用 .filter() 代替.each()：

$('body').on('click', '.send-application', function (e) {
    e.preventDefault();
    if (!$('input[name=entitlement]').filter(':checked').length) {
        $(this).css({
            'box-shadow': '0 0 5px rgba(255,0,0,0.4)'
        });
        isFormValid = false;
    } else {
        $(this).css({
            'box-shadow': 'none'
        });
    }
});

<强> Updated Fiddle

Answer 3

您的代码中存在错误，请删除.val()

if (!$(this).is(':checked')) {

$(this).is(':checked')返回true或false，如果为false，则下面的代码将起作用，并将框阴影添加到未选中的复选框

Answer 4

当您选中单选按钮时，会自动为entitlement指定所选单选按钮的值。因此，您只需使用$(this).val()检查输入值。

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

4 个答案:

Here's a fiddle