Question

我在包含相同名称的页面上有多个复选框。但是，它们在表中按行排列，因此用户可以选择它们。因此，我需要验证是否已选中每行中至少一个复选框。

下图直观地显示了此问题的页面：

以下代码只是生成上面图像的所有代码的一部分。

<div class="form-group">
        <label>Ensino Fundamental</label>
        <div class="form-check m-l-10">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="1anoensinofundamental" name="OfertaSerie" value="63" data-oferta-nivel-ensino="1">
                    <label class="custom-control-label" for="1anoensinofundamental">1&#186; ano</label>
                </div>
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="2anoensinofundamental" name="OfertaSerie" value="64" data-oferta-nivel-ensino="1">
                    <label class="custom-control-label" for="2anoensinofundamental">2&#186; ano</label>
                </div>
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="3anoensinofundamental" name="OfertaSerie" value="51" data-oferta-nivel-ensino="1">
                    <label class="custom-control-label" for="3anoensinofundamental">3&#186; ano</label>
                </div>
        </div>
    </div>
    <div class="form-group m-t-20">
        <label>Ensino M&#233;dio</label>
        <div class="form-check m-l-10">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="1serieensinomedio" name="OfertaSerie" value="45" data-oferta-nivel-ensino="2">
                    <label class="custom-control-label" for="1serieensinomedio">1&#170; s&#233;rie</label>
                </div>
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="2serieensinomedio" name="OfertaSerie" value="54" data-oferta-nivel-ensino="2">
                    <label class="custom-control-label" for="2serieensinomedio">2&#170; s&#233;rie</label>
                </div>
        </div>
    </div>

Answer 1

通过列进行验证，您可以执行以下操作，因为这就是DOM中复选框的组织方式。要通过行进行验证，您将必须提供所有HTML，因为我只能对其余HTML的结构进行有根据的假设。...

function validateChecks(){
    var groups = $('.form-group');

    var failedGroups = 0;

    groups.each(function () {
        var columns = $(this).find('.form-check'),
            failedColumns = 0;

            columns.each(function (){
                var checks = $(this).find('input[type="checkbox"]'),
                    failedChecks = 0;

                checks.each(function (){
                    var checked = $(this).prop("checked");
                    if (!checked) failedChecks++;
                }) 
                if (failedChecks > 0) failedColumns++;
            })
            if (failedColumns > 0) failedGroups++;
    })

    if (failedGroups > 0) {
        console.log("One of the columns isn't valid!")
    }
}

验证是否在不同组中选择了具有相同名称的复选框

1 个答案: