jquery - 验证是否检查了所有单选按钮组

Question

我从这个 SF 链接中进行了编辑：StackOverflow 链接，用户 Blazemonger 在其中展示了一个演示，JFiddle Demo

从上面： 1）如何在提交按钮而不是警报框下方的 DIV 语句中显示所有错误，而不是一次显示一个错误？2）一旦错误正确并再次按下提交按钮，我如何将bg颜色改回白色？

我为问题 2 编辑了这样的小提琴，但它不起作用：

$("form").submit(function() {
    var submitme = true;
    $(':radio').each(function() {
        nam = $(this).attr('name');
        if (submitme && !$(':radio[name="'+nam+'"]:checked').length) {
            alert(nam+' group not checked');
            $(':radio[name="'+nam+'"]+label').addClass('error');
            submitme = false;
        }
        if (submitme && $(':radio[name="'+nam+'"]:checked').length <> 0) {
                $(':radio[name="'+nam+'"]+label').addClass('noerror');
        }
    });
    return submitme;
});

CSS：

.error {
    background-color: red;
}
.noerror {
    background-color: white;
}

Answer 1

单击按钮时，您可以检查是否选择了每个组中的一个值，如果不显示 div ..

检查这个更新的小提琴

$("form").submit(function() {
    var html = '';
    var submitme = true;
    $(':radio').each(function() {
        nam = $(this).attr('name');
        if (!$(':radio[name="'+nam+'"]:checked').length) {
            $(':radio[name="'+nam+'"]+label').addClass('error');
            if(html.indexOf(nam) < 0){
                html += nam +' group not checked' + '</br>';
            }
            submitme = false;
        }
    });
    if(submitme == false){
       $('.errorDiv').empty().append(html).show().addClass('error');
    }
    else{
      $('.errorDiv').hide();
    }

    return submitme;
});
​
        ​
        .error {
            background-color: red;
            display:none;
        }

​</p>