Javascript 复选框上的html5验证

HTML5表单验证不包括从一组复选框开始，至少选中其中一个复选框的情况。如果复选框具有必需的属性，则必须选中它，这是我最多可以得到的。 因此，我构建了一个工作正常的变通方法（代码段中的代码）。问题是，这适用于一组复选框。但是我希望我的代码是有效的，即使我添加了更多的chackbox组。我需要一个关于如何使它对多个群体有效的建议。 有什么想法吗

函数bindItemsInput（）{
var inputs=document.querySelectorAll（'[name=“option[]]”）
var radioForCheckboxes=document.getElementById（'radio-for-checkboxes'））
函数复选框（）{
var IsAttleAstoneServiceSelected=false；
对于（变量i=inputs.length-1；i>=0；--i）{
如果（输入[i].选中）isAtLeastOneCheckboxSelected=true；
}
RadioForCheckBox.checked=IsAtleAstoneCheckbox已选中
}
对于（变量i=inputs.length-1；i>=0；--i）{
输入[i]。addEventListener（'change'，复选框）
}
}
bindItemsInput（）//在窗口中调用onload

.checkboxs包装器{
位置：相对位置；
}
.checkboxs包装输入[name=“radio for required checkboxes”]{
位置：绝对位置；
保证金：0；
排名：0；
左：0；
宽度：100%；
身高：100%；
-webkit外观：无；
指针事件：无；
边界：无；
背景：无；
}

---

如果我理解的话。因此，您必须提供另一个id和另一个名称。当然，请尝试以下方法：

function bindItemsInput() {
    var inputs = $("input[type=checkbox]");
    var radios = $("input[type=radio]");
    function checkCheckboxes () {
        var isAtLeastOneServiceSelected = false;
        for(var i = inputs.length-1; i >= 0; --i) {
            if (inputs[i].checked) isAtLeastOneCheckboxSelected = true;
        }
        radios.each( function(){
            $(this).checked = $(this).siblings($("input[type=checkbox]:checked")).length > 0;
        });
    }
    for(var i = inputs.length-1; i >= 0; --i) {
        inputs[i].addEventListener('change', checkCheckboxes)
    }
}

---

这就是我想象中你在寻找的：

const myForm=document.forms['my-form']
myForm.addEventListener（'change'，bindItemsInput）//全局更改事件侦听器
函数bindItemsInput（e）//
{
如果（！e.target.matches（'div.checkboxs-wrapper-input[type=checkbox]）返回
//拒绝不关心的复选框
让groupDiv=e.target.closest（'div.checkboxs-wrapper'））
，radioGroup=groupDiv.querySelector（'input[type=radio]”）
，checkGroup=groupDiv.querySelectorAll（'input[type=checkbox]”）
;
radioGroup.checked=[…checkGroup].reduce（（标志，chkBx）=>标志| | chkBx.checked，false）
}
//----验证部分-------------------
myForm.onsubmit=e=>//验证
{
e、 preventDefault（）//禁用提交以进行测试
控制台清除（）
//复选框检查值：
让options=[…myForm['option[]']].reduce（（r，s）=>{if（s.checked）r.push（s.value）；返回r}，[]
，products=[…myForm['product[]']]。reduce（（r，s）=>{if（s.checked）r.push（s.value）；返回r}，[]
console.log（'options='，JSON.stringify（options））
console.log（'products='，JSON.stringify（products））
myForm.reset（）//为新测试清除任何内容
console.log（'form reseted'）
}

提交

使用jQuery，可以用更少的代码完成这项工作

$（文档）.ready（函数（）{
var checkboxesinsamegroup=函数（）{
变量输入=$（this）.children（“输入[name='option[]']”）；
var radio=$（this）.children（“输入[name^='radio-for-group']）[0]；
radio.checked=inputs.is（“：checked”）；
};
$（“.checkboxs wrapper”）。在（'change'，checkboxsinsamegroup）上；
});
.checkboxs包装器{
位置：相对位置；
}

你所说的团体是什么意思？名称=选项[]，名称=选项[1]？正如您在我的snippent组中看到的，当复选框共享相同的名称时。因此，至少应该检查其中一个选项。因此，另一组将有一个不同的名称：即products[]抱歉，我不理解，请展示一个包含更多组的示例。。。并显示想要的结果..你不知道什么是组…我怀疑只是名称在改变，对我来说你创建了一个新的完整表单？你有相同的id。。。。对于无法在函数中使用的复选框的单选。id必须唯一。如果产品[]选中一个复选框，而选项[]无，则代码将列出两个复选框组（产品[]和选项[]）。我的目标是在这种情况下列出唯一的选项[]，这正是我试图实现的。无论我有多少个复选框组，这都是适用的。谢谢你的努力！