jQuery验证无线电按钮和同一表单上的复选框

Question

我有一个形式，该表单从数据库中创建一组无线电按钮和一组复选框。这些固定在六个收音机和六个复选框中。它们用于问卷调查，当用户单击"下一个"按钮时，该表单的新版本将打开。在某些情况下，将有四个无线电按钮，有时还会有三个按钮。相同的复选框，有时是六个或有时四个。

我真的很努力地在表格上进行jQuery验证。我可以将收音机按钮可行，但我无法成功进行复选框。

剃须刀视图如下：

 @if (Model.fldAnswerType == "Radio") { @Html.Label("", String.Format(Model.fldQuestion, 1))
<br /> if (Model.fldOption1 != null) {
<label class="containers">
    @Model.fldOption1
    <input type="radio" name="Radio" id="Radio" value="@Model.fldOption1">
    <span class="radios"></span>
</label>
} if (Model.fldOption2 != null) {
<label class="containers">
    @Model.fldOption2
    <input type="radio" name="Radio" id="Radio" value="@Model.fldOption2">
    <span class="radios"></span>
</label>
} if (Model.fldOption3 != null) {
<label class="containers">
    @Model.fldOption3
    <input type="radio" name="Radio" id="Radio" value="@Model.fldOption3">
    <span class="radios"></span>
</label>
} if (Model.fldOption4 != null) {
<label class="containers">
    @Model.fldOption4
    <input type="radio" name="Radio" id="Radio" value="@Model.fldOption4">
    <span class="radios"></span>
</label>
} if (Model.fldOption5 != null) {
<label class="containers">
    @Model.fldOption5
    <input type="radio" name="Radio" id="Radio" value="@Model.fldOption5">
    <span class="radios"></span>
</label>
} if (Model.fldOption6 != null) {
<label class="containers">
    @Model.fldOption6
    <input type="radio" name="Radio" id="Radio" value="@Model.fldOption6">
    <span class="radios"></span>
</label>
} }
<fieldset class="chkGroup">
    @if (Model.fldAnswerType == "Check") { @Html.Label("", String.Format(Model.fldQuestion, 1))
    <br /> if (Model.fldOption1 != null) {
    <label class="containers">
        @Model.fldOption1
        <input type="checkbox" value="@Model.fldOption1" name="chkGroup[]" id="Check1" class="Check">
        <span class="checkmark"></span>
    </label>
    } if (Model.fldOption2 != null) {
    <label class="containers">
        @Model.fldOption2
        <input type="checkbox" value="@Model.fldOption2" name="chkGroup[]" id="Check2" class="Check">
        <span class="checkmark"></span>
    </label>
    } if (Model.fldOption3 != null) {
    <label class="containers">
        @Model.fldOption3
        <input type="checkbox" value="@Model.fldOption3" name="chkGroup[]" id="Check3" class="Check">
        <span class="checkmark"></span>
    </label>
    } if (Model.fldOption4 != null) {
    <label class="containers">
        @Model.fldOption4
        <input type="checkbox" value="@Model.fldOption4" name="chkGroup[]" id="Check4" class="Check">
        <span class="checkmark"></span>
    </label>
    } if (Model.fldOption5 != null) {
    <div id="Checks"></div>
    <label class="containers">
        @Model.fldOption5
        <input type="checkbox" value="@Model.fldOption5" name="chkGroup[]" id="Check5" class="Check">
        <span class="checkmark"></span>
    </label>
    } if (Model.fldOption6 != null) {
    <label class="containers">
        @Model.fldOption6
        <input type="checkbox" value="@Model.fldOption6" name="chkGroup[]" id="Check6" class="Check">
        <span class="checkmark"></span>
    </label>
    } 
  }
</fieldset>
<p class="control-error" name="control-error" id="control-error">You must select an answer.</p>
<p class="checkerror" name="checkerror" id="checkerror">You must select an answer chk.</p>
<input type="submit " value="Next " id="btn " class="btn btn-sm btn-primary " />

我对不同元素的jQuery正在同时工作，而不是根据表单上的元素类型单独工作。

 $(document).ready(function () {
        $('#myForm').submit(function () {
            if ($('#Radio').length) {
                console.log("Radio")
                if (!$("input[name='Radio']:checked").val()) {
                    $('#control-error').show();
                    return false;
                } else {
                    $('#control-error').hide();
                }
            } else {
                $('#control-error').hide();
            }
            //If chk exists do the following
            if (!$("input[name='chkGroup[]']:checked").val()) {
                $('.chkGroup').each(function () {
                    console.log("Check")
                    if ($(this).find('input[type=checkbox]:checked').length == 0) {
                        $('#checkerror').show();
                        return false;
                    }
                    else {
                        $('#checkerror').show();
                    }
                });
            } else {
                $('#control-error').hide();
            }
        });
    });

Answer 1

您的广播框都具有相同的ID-这可能导致错误，因为它不知道要验证哪一个。

更改收音机框以拥有一堂课，然后应该能够使用与复选框相同的JS。

编辑：

$('#btn').click(function () {
        $('#body').hide();
            if ($('.Radio').length) {                  
                if (!$("input.Radio[name='Radio']:checked").val()) {
                    console.log("Radio")
                    $('#radioerror').show();
                    return false;
                } else {
                    $('#radioerror').hide();
                }
            } else {
                $('#radioerror').hide();
            }               
        });
        $('#btnCheck').click(function () {
            if ($('.Check').length) { 
            if ($('input.Check[type=checkbox]:checked').length < 1) {  
              $('#chkerror').show();
              return false;
            }
            else {                            
                $('#chkerror').hide();
            }
           } else {
                $('#chkerror').hide();
            } 
        });