确定是否每个无线电组都选择了一个选项答案

【问题标题】：Determine if every radio group has had an option selected确定是否每个无线电组都选择了一个选项
【发布时间】：2011-07-22 22:44:38
【问题描述】：

在启用提交按钮之前，我需要确保所有单选组都已得到答复。如果我有：

var radioBtns = $('input').filter(':radio');

它告诉我有多少单选按钮，但我需要知道是否有任何组尚未选择选项。

【问题讨论】：

应该注意的是，在每个单选组中没有至少一个选择的情况下传递页面是不好的做法。如果用户选择了错误的单选值，他们应该能够返回到原始状态，但是不可能“取消选择”单选组，就像选择不在下拉列表中的值一样 -下列表。

标签： jquery

【解决方案1】：

如果你知道你有多少组，你可以这样做：

if($('input:radio:checked').length < numGroups){
    // At least one group isn't checked
}

否则需要先统计组数。我想不出任何更好的方法来做到这一点：

var rgroups = [];
$('input:radio').each(function(index, el){
        var i;
        for(i = 0; i < rgroups.length; i++)
            if(rgroups[i] == $(el).attr('name'))
                return true;
        rgroups.push($(el).attr('name'));
    }
);
rgroups = rgroups.length;

if($('input:radio:checked').length < rgroups)
    alert('You must fill in all the fields.');
else
    alert('Thanks!');

【讨论】：

也许以某种方式使用 .unique 方法来查找唯一的单选按钮名称。
当保罗，干得好！我的js不够流利，无法编写这样的代码。谢谢，因为我不会想到将元素推入数组。想想看，这里的.unique方法还是有希望的。
@cf_PhillipSenn，jQuery.unique() 仅适用于 DOM 元素，而不是您可能期望的方式。如果它们是 exact 相同的元素，它只会将两个元素视为唯一的。因此，任何两个元素都是唯一的，即使它们具有所有相同的属性。

【解决方案2】：

这行得通：

var all_answered = true;
$(':radio').each(function(){
    if($(':radio[name='+$(this).attr('name')+']:checked').length == 0)
    {
        all_answered = false;
    }
});
alert(all_answered);

工作演示：http://jsfiddle.net/AlienWebguy/8Cu6d/1/

【讨论】：

不，这就是全部。我需要知道有多少组没有被检查。

【解决方案3】：

获取单选按钮组的数量：

var prevGroupName = "", currGroupName = "", groupCount = 0;
    $("input[type='radio']").each(function () {

        if (prevGroupName == "") {
            groupCount++;
            prevGroupName = this.name;
        }

        currGroupName = this.name;

        if (prevGroupName != currGroupName) {
            groupCount++;
            prevGroupName = currGroupName;
        }
    });

获取选中单选按钮的数量：

var radioChecked = $("input[type='radio']:checked").length;

【讨论】：

【解决方案4】：

不是很整洁，但你仍然可以使用它

$("input:button").click(function(){
    var v =$('input[name="a"]').filter(':checked');
    var vr =$('input[name="b"]').filter(':checked');
    if(v.length==0)
    {
    alert("select a group");

    }else alert("very good");


    if(vr.length==0)
    {
    alert(" o come on ");

    }else alert("guud");

    });

FIDDLE

【讨论】：

【解决方案5】：

根据此处的答案，here 和 here。检查一个类并允许选择同一组中的多个项目。

function check_all_groups () {
    var counter = 0
    $('.btn-group').each(function () {
        $(this).children('.atleastone').each(function () {
            if ($(this).hasClass('active')) {
                counter += 1
                return false
            }
        });
    });

    if (counter == $('.btn-group').length) {
        return true
    }
};

【讨论】：

【解决方案6】：

我有理论* 解决方案建立在上面Paulpro 的答案之上，它使用Set 的唯一性属性来过滤来自 JQuery 的元素名称列表：

var radioNames = new Set(Array.from($('input:radio').map(function() { return this.name } )));
var inputGroupCount = radioNames.length;

if( $('input:radio:checked').length < inputGroupCount){
    // At least one group isn't checked
}

这使用map() 函数从无线电组中提取name 属性。然后是converted to an Array，用作Set 的构造函数参数。

很遗憾，截至 2016 年 4 月，IE 中不支持 Set(iterable) 和 Array.from()； Opera 和 Safari 的支持有限。

如果您可以确保您的用户使用的是 Chrome 或 Firefox，或者这是后端代码，那么请继续！

【讨论】：