选中 Javascript 中的所有“是”复选框

Question

I am trying to implement a "yes to all" checkbox on my website.

This is a sample of part of the code I have so far.

 $("input:checkbox").each(function () { var pos = $(this).prop("id"); var arr = pos.split("_"); var arr2 = arr[1].split("C"); if (arr2[1] == undefined) { var arr3 = arr[1].split("W"); $(this).addClass(arr3[0]); } else { $(this).addClass(arr2[0]); } }); $(".P2").change(function () { var a = $(".P2:checkbox:checked"); if (a.length = 1) { $(".P3").prop("checked", true); $(".P4").prop("checked", true); $(".P5").prop("checked", true); $(".P6").prop("checked", true); $(".P7").prop("checked", true); $(".P8").prop("checked", true); $(".P9").prop("checked", true); $(".P10").prop("checked", true); $(".P11").prop("checked", true); } });

 <asp:CheckBox ID="P2C1" runat="server" text="&nbsp;&nbsp;Yes to All"/> <asp:CheckBox ID="P3C1" runat="server" text="&nbsp;&nbsp;Yes" /> <asp:CheckBox ID="P3C2" runat="server" text="&nbsp;&nbsp;No" /> <asp:CheckBox ID="P4C1" runat="server" text="&nbsp;&nbsp;Yes" /> <asp:CheckBox ID="P4C2" runat="server" text="&nbsp;&nbsp;No" />

That is just a portion of the checkboxes it goes on in the same pattern. The first box is yes and the second no. I need to implement the P2 checkbox as a select yes to all and only have the javascript select the checkboxes with an ID of C1 at the end. Currently, when checked the select yes to all checks both yes(C1) and no(C2) boxes. I have tried to change the code to:

 $(".P2").change(function () {
          var a = $(".P2:checkbox:checked");
          if (a.length = 1) {
              $(".P3C1").prop("checked", true);
              $(".P4C1").prop("checked", true);

But that does not work and it does not check any boxes.

I know it has to do with the top input function, but I am just not sure what to change. I don't want to mess with the top input function at all because other things rely on that to work as is.

Answer 1

I swapped out the JSP tags for native HTML tags. The example below should adhere to your algorithm.

The "Yes to All" should have a special class or ID.

 $('.all').change(function() { $('input[id$="_C1"]:not(.all)').prop('checked', $(this).is(':checked')); $('input[id$="_C2"]:not(.all)').prop('checked', false); }); $('input:not(.all)').change(function() { var id = $(this).attr('id'), parts = id.split(/_/), group = parts[0]; $('input[id^="' + group + '"]:not(#' + id + ')').each(function() { if ($(this).is(':checked')) { $(this).prop('checked', false); } }); });

 body { display: flex; flex-direction: column; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label><input type="checkbox" id="P2_C1" class="all" />Yes to All</label> <label><input type="checkbox" id="P3_C1" />Yes</label> <label><input type="checkbox" id="P3_C2" />No</label> <label><input type="checkbox" id="P4_C1" />Yes</label> <label><input type="checkbox" id="P4_C2" />No</label>