Javascript 使用JQuery动态检查是否没有检查多个组的单选按钮

我知道这个问题有很多相关的资源。但是，我仍然需要一个完美的解决方案

我已经动态生成了五个单选按钮组。每组最多可容纳五个单选按钮。我已将“无签入”和“至少一个签入功能”作为单个组进行验证

我的问题是，如何验证是否“检查了所有组”

参考：

我的代码如下：

var names = [];

$('input[type="radio"]').each(function() {
    // Creates an array with the names of all the different checkbox group.
    names[$(this).attr('name')] = true;
});

// Goes through all the names and make sure there's at least one checked.
for (name in names) {
    var radio_buttons = $("input[name='" + name + "']");
    if (radio_buttons.filter(':checked').length == 0) {
        alert('none checked in ' + name);
    } 
    else{
        // At least one checked
        var val = radio_buttons.val();
    }
}

当选中所有单选按钮组时，我需要重定向到其他页面。这有点简单。但是，对我来说，看起来很复杂

请帮忙

更新 我为前两个组生成的HTML

    <div class="row">
    <div class="optionsContainer"><div id="ratingContainer">
    <ul class="0">
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="0" id="1"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="0" id="2"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="0" id="3"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="0" id="4"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="0" id="5"></div></li>
    </ul></div></div></div>

    <div class="row">
    <div class="optionsContainer"><div id="ratingContainer">
    <ul class="0">
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="1" id="1"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="1" id="2"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="1" id="3"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="1" id="4"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="1" id="5"></div></li>
    </ul></div></div></div>

---

注意：此处仅更改组名。

看起来您已经知道如何计算选中的元素。如果你把它放在第一个循环中，如果有一个变量是空的，你可以把它标记为false

var names = [];
var allChecked = true;

$('input[type="radio"]').each(function() {
    // Creates an array with the names of all the different checkbox group.
    names[$(this).attr('name')] = true;
    if $(this).filter(':checked').length === 0 {
        allChecked = false;
    }
});

改变

到

除去

onclick=“检查这个（这个）；”

从html中，为所有输入元素添加了一个事件处理程序

elems.find（“输入”）。在（“更改”上，选中此项）

试一试


var allChecked=false；
变量名称=[]；
变量元素=$（“.0”）；
函数检查此（e）{
var name=e.target.name；
if（name.length


























Javascript:

$('form').on('submit', function(e) {
    e.preventDefault();

    var checkboxes = {};
    $(':checkbox').each(function() {
        checkboxes[$(this).attr('name')] = true;
    });

    $.each(checkboxes, function(i, val) {
        if($(':checkbox[name='+i+']').is(':checked')) delete checkboxes[i];
    });

    if (!Object.keys(checkboxes).length) {
        alert('success!');
    } else {
        alert('error!');
    }
});

<form>
    <div>
        Group:
        <input type="checkbox" name="group1" value="" />
        <input type="checkbox" name="group1" value="" />
        <input type="checkbox" name="group1" value="" />
    </div>
    <div>
        Group:
        <input type="checkbox" name="group2" value="" />
        <input type="checkbox" name="group2" value="" />
        <input type="checkbox" name="group2" value="" />
    </div>
    <div>
        Group:
        <input type="checkbox" name="group3" value="" />
        <input type="checkbox" name="group3" value="" />
        <input type="checkbox" name="group3" value="" />
    </div>
    <button type="submit">Submit</button>
<form>

HTML:

$('form').on('submit', function(e) {
    e.preventDefault();

    var checkboxes = {};
    $(':checkbox').each(function() {
        checkboxes[$(this).attr('name')] = true;
    });

    $.each(checkboxes, function(i, val) {
        if($(':checkbox[name='+i+']').is(':checked')) delete checkboxes[i];
    });

    if (!Object.keys(checkboxes).length) {
        alert('success!');
    } else {
        alert('error!');
    }
});

<form>
    <div>
        Group:
        <input type="checkbox" name="group1" value="" />
        <input type="checkbox" name="group1" value="" />
        <input type="checkbox" name="group1" value="" />
    </div>
    <div>
        Group:
        <input type="checkbox" name="group2" value="" />
        <input type="checkbox" name="group2" value="" />
        <input type="checkbox" name="group2" value="" />
    </div>
    <div>
        Group:
        <input type="checkbox" name="group3" value="" />
        <input type="checkbox" name="group3" value="" />
        <input type="checkbox" name="group3" value="" />
    </div>
    <button type="submit">Submit</button>
<form>


组：
组：
组：
提交
你能提供你的JS小提琴吗？你的代码看起来不错，但不需要第二个循环。只需将复选框移到第一个循环“我的问题是，如何验证“所有组均已选中”是否是检查每个组中是否至少选中一个复选框，或每个组是否选中所有复选框的要求？@guest271314每个组中至少选中一个复选框
id
值应是唯一的
id=“ratingContainer”
使用了两次。不会出现这种情况。让我再试一次。谢谢你的代码。你的代码对我来说很好。但是，我需要在每次
change
事件中在“$”（“.0”）”中动态获取名称属性（0到4）。@rajmathan“我需要在“$”（.0”）”中动态获取名称属性（0到4）？不，用户需要单击按钮。事件应仅在选择“所有组”元素后触发。抱歉。未定义的错误。无论如何，谢谢您的时间。@rajmathan因为
onclick=“checkThis（this）；”
被附加到
li
元素，可以单击
li
并调用
checkThis
，即使
input
元素实际上没有被选中。正在更新stacksnippets。此静态go的代码看起来不错。对于在“.group”上的动态调用，似乎令人困惑。老实说，我不知道该在什么位置输入。从我的代码中可以看到组位置！！：（我已经更新了更适合您需要的答案。现在，它会在所有具有相同名称的复选框组中循环，并检查这些组中是否有至少一个复选框。