javascript - jQuery 根据复选框的状态为变量分配值以进行提交

Question

我使用 jQuery 来验证表单中的字段，然后根据是否选中复选框来填充变量，这样我就可以将数据提交到 java 程序。上面类似的逻辑也有效；但是，它在“alert (5)”之后停止(即未到达“alert("5a")”或“alert("5b)")”。我已经包含了复选框的 HTML，以防它们是问题的一部分(您可以选择“全部”(选中的第一个复选框，即“警报 (5)”之后)或其他 8 个复选框中的一个或多个- 分为两行)。

控制台没有错误。

我已经对 HTML 代码进行了搜索，以确保类、id 和名称不会出现在其他地方。

HTML:

<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class=" bg-warning col-lg-12 col-md-12 col-sm-12 col-xs-2" style="border:solid black;">
            <div class="form-group" style="display: block;">
                <label class="control-label col-lg-2 col-md-2 col-sm-2 col-xs-2" for="attendance" style="line-height:50px">Attendance:<span class="req"> *</span></label>
            </div>
            <div class="controls col-lg-1 col-md-1 col-sm-1 col-xs-1">
                <label class="checkbox-inline" for="attendanceAllCBs"><input type="checkbox" class="attendanceAll" value="All" id="attendanceAllCBs" name="attendanceAllCBs[]">All</label>
            </div>

            <div class=" col-lg-9 col-xs-9 col-sm-9">
                <div id="top">
                    <label class="checkbox-inline col-lg-2" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="Friday" id="attendanceOtherCBs" name="attendanceOtherCBs[]">Friday</label>
                    <label class="checkbox-inline col-lg-2" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="Saturday" id="attendanceOtherCBs" name="attendanceOtherCBs[]">Saturday</label>
                    <label class="checkbox-inline col-lg-2" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="Sunday" id="attendanceOtherCBs" name="attendanceOtherCBs[]">Sunday</label>
                    <label class="checkbox-inline" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="DaysOnly" id="attendanceOtherCBs" name="attendanceOtherCBs[]">Days Only</label>
                </div>
                <div id="bottom">
                    <label class="checkbox-inline col-lg-2" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="FridayNight" id="attendanceOtherCBs" name="attendanceOtherCBs[]">Friday Night</label>
                    <label class="checkbox-inline col-lg-2" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="SaturdayNight" id="attendanceOtherCBs" name="attendanceOtherCBs[]">Saturday Night</label>
                    <label class="checkbox-inline col-lg-2" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="SundaydayNight" id="attendanceOtherCBs" name="attendanceOtherCBs[]">Sundayday Night</label>
                    <label class="checkbox-inline" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="Other" id="attendanceOtherCBs" name="attendanceOtherCBs[]">Other</label>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery:

         alert(4);
         var gender = '';
         if (genderCBs[0].checked === true){
             gender = "M"
         }else{
             gender = "F"
         }
         alert(5);
         var attendanceAllvar = '';
         if (attendanceAllCBs[0].checked === true){
             alert("5a");
             attendanceAllvar = "Y";
         }else{
             alert("5b");
             attendanceAllvar = "N";
         }
         alert(6);
         var attendanceFriday = '';
         if(attendanceOtherCBs[0].checked === true){
             attendanceFriday = "Y";
         }else{
             attendanceFriday = "N";
         }

以下作品:

HTML:

<div class="controls col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <span class="req"> *</span><label class="checkbox-inline" for="genderCBs"><input type="checkbox" class="gender" value="M" id="genderCBs" name="genderCBs[]">Male</label>
    <label class="checkbox-inline" for="genderCBs"><input type="checkbox" class="gender" value="F" id="genderCBs" name="genderCBs[]">Female</label>
</div>

jQuery:

alert(4);
var gender = '';
if (genderCBs[0].checked === true){
    gender = "M"
}else{
    gender = "F"
}

Answer 1

试试这个:-

HTML:-

<div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class=" bg-warning col-lg-12 col-md-12 col-sm-12 col-xs-2" style="border:solid black;">
                <div class="form-group" style="display: block;">
                    <label class="control-label col-lg-2 col-md-2 col-sm-2 col-xs-2" for="attendance" style="line-height:50px">Attendance:<span class="req"> *</span></label>
                </div>
                <div class="controls col-lg-1 col-md-1 col-sm-1 col-xs-1">
                    <label class="checkbox-inline" for="attendanceAllCBs"><input type="checkbox" class="attendanceAll" value="All" id="attendanceAllCBs" name="attendanceAllCBs[]">All</label>
                </div>

                <div class=" col-lg-9 col-xs-9 col-sm-9">
                    <div id="top">
                       <label class="checkbox-inline col-lg-2" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="Friday" id="attendanceFriday" name="attendanceOtherCBs[]">Friday</label>
                        <label class="checkbox-inline col-lg-2" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="Saturday" id="attendanceSaturday" name="attendanceOtherCBs[]">Saturday</label>
                        <label class="checkbox-inline col-lg-2" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="Sunday" id="attendanceSunday" name="attendanceOtherCBs[]">Sunday</label>
                        <label class="checkbox-inline" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="DaysOnly" id="attendanceDaysOnly" name="attendanceOtherCBs[]">Days Only</label>
                    </div>
                    <div id="bottom">
                        <label class="checkbox-inline col-lg-2" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="FridayNight" id="FridayNight" name="attendanceOtherCBs[]">Friday Night</label>
                        <label class="checkbox-inline col-lg-2" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="SaturdayNight" id="SaturdayNight" name="attendanceOtherCBs[]">Saturday Night</label>
                        <label class="checkbox-inline col-lg-2" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="SundaydayNight" id="SundaydayNight" name="attendanceOtherCBs[]">Sundayday Night</label>
                        <label class="checkbox-inline" for="attendanceOtherCBs"><input type="checkbox" class="attendance2" value="Other" id="Other" name="attendanceOtherCBs[]">Other</label>
                    </div>
                </div>
            </div>
        </div>
    </div>




    jQuery:

             alert(4);
             var gender = '';

             alert(5);
             var attendanceAllvar = '';
             if ($('#attendanceAllCBs').prop('checked') === true){
                 alert("5a");
                 attendanceAllvar = "Y";
             }else{
                 alert("5b");
                 attendanceAllvar = "N";
             }
             alert(6);
             var attendanceFriday = '';
             if($('#attendanceFriday').prop('checked') === true){
                 attendanceFriday = "Y";
             }else{
                 attendanceFriday = "N";
             }