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

【问题标题】：Check all "yes" checkboxes in Javascript选中 Javascript 中的所有“是”复选框
【发布时间】：2023-03-25 10:36:01
【问题描述】：

我正在尝试在我的网站上实现一个“全部同意”复选框。

这是我目前的部分代码示例。

$("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" />

这只是它以相同模式进行的复选框的一部分。第一个框是yes，第二个框是no。我需要将 P2 复选框实现为全部选择是，并且只有 javascript 选择最后 ID 为 C1 的复选框。目前，当检查“是”是以所有检查是（C1）和否（C2）框。我试图将代码更改为：

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

但这不起作用，它不会选中任何框。

我知道这与顶部输入功能有关，但我不确定要更改什么。我根本不想弄乱顶部输入功能，因为其他东西都依赖它来按原样工作。

【问题讨论】：

您的 ID 中都没有下划线，因此无法拆分。此外，我不会在您的“全部同意”复选框上看到 P2 类。
我不确定哪个位不起作用。但是，您依赖 ASP.NET 生成 ID，然后使用 JQuery 添加到类中。为什么不向 HTML 标记添加一个类？在添加类之前还使用change 方法。我认为这不会触发？

标签： javascript html asp.net

【解决方案1】：

我将 JSP 标记换成了原生 HTML 标记。下面的示例应该符合您的算法。

“Yes to All”应该有一个特殊的类或 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>

【讨论】：