javascript - 如何在不使用 id 的情况下巧妙地选择特定的 div

Question

目前我正在构建一个表，其中包含两个相同的复选框组，当另一个复选框被选中时需要自动检查，下面是我正在使用的 jquery 脚本，我如何使用智能方式来处理此功能而不是使用数百万像我现在一样的 ID？

$(document).ready(function() {
  $("#GMSC01BOX-1").change(function() {
    $("#GMSC01BOX-2").prop("checked", this.checked);
  });
  $("#GMSC01BOX-2").change(function() {
    $("#GMSC01BOX-1").prop("checked", this.checked);
  });
  $("#GMSC02BOX-1").change(function() {
    $("#GMSC02BOX-2").prop("checked", this.checked);
  });
  $("#GMSC02BOX-2").change(function() {
    $("#GMSC02BOX-1").prop("checked", this.checked);
  });
  $("#VMSC01BOX-1").change(function() {
    $("#VMSC01BOX-2").prop("checked", this.checked);
  });
  $("#VMSC01BOX-2").change(function() {
    $("#VMSC01BOX-1").prop("checked", this.checked);
  });
  $("#VMSC02BOX-1").change(function() {
    $("#VMSC02BOX-2").prop("checked", this.checked);
  });
  $("#VMSC02BOX-2").change(function() {
    $("#VMSC02BOX-1").prop("checked", this.checked);
  });
  $("#GMGW01BOX-1").change(function() {
    $("#GMGW01BOX-2").prop("checked", this.checked);
  });
  $("#GMGW01BOX-2").change(function() {
    $("#GMGW01BOX-1").prop("checked", this.checked);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="CS-popup" class="popup-windows ">
  <input type="checkbox" name="CS" value="GMSC01" id="GMSC01BOX-1">GMSC01
  <input type="checkbox" name="CS" value="GMSC02" id="GMSC02BOX-1">GMSC02
  <input type="checkbox" name="CS" value="VMSC01" id="VMSC01BOX-1">VMSC01
  <br>
  <input type="checkbox" name="CS" value="VMSC02" id="VMSC02BOX-1">VMSC02
  <input type="checkbox" name="CS" value="GMGW01" id="GMGW01BOX-1">GMGW01
  <input type="checkbox" name="CS" value="GMGW02" id="GMGW02BOX-1">GMGW02
  <br>
  <input type="checkbox" name="CS" value="VMGW01" id="VMGW01BOX-1">VMGW01
  <input type="checkbox" name="CS" value="VMGW02" id="VMGW02BOX-1">VMGW02
  <input type="checkbox" name="CS" value="SPS01" id="SPS01BOX-1">SPS01
  <br>
  <input type="checkbox" name="CS" value="SPS02" id="SPS02BOX-1">SPS02
  <input type="checkbox" name="CS" value="HSS01" id="HSS01BOX-1">HSS01
  <input type="checkbox" name="CS" value="HSS02" id="HSS02BOX-1">HSS02
  <br>
</div>
<div>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne015" type="checkbox" id="GMSC01BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne016" type="checkbox" id="GMSC02BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne017" type="checkbox" id="VMSC01BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne018" type="checkbox" id="VMSC02BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne019" type="checkbox" id="GMGW01BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne020" type="checkbox" id="GMGW02BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne021" type="checkbox" id="VMGW01BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne022" type="checkbox" id="VMGW02BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne023" type="checkbox" id="SPS01BOX-2">

http://jsfiddle.net/HvKmE/1127/

Answer 1

相关的复选框组之间，唯一匹配的部分是id的前6位。您可以使用 .each()检查是否匹配 id 部分 startsWith()是否有任何其他复选框:

$(document).ready(function() {
  $('[type="checkbox"]').on('change',function(){
    var idMachedPart = this.id.substring(0,6);
    var status = this.checked;
    $('[type=checkbox]').each(function(){
      if(this.id.startsWith(idMachedPart))
        $(this).prop('checked', status);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="CS-popup" class="popup-windows ">
  <input type="checkbox" name="CS" value="GMSC01" id="GMSC01BOX-1">GMSC01
  <input type="checkbox" name="CS" value="GMSC02" id="GMSC02BOX-1">GMSC02
  <input type="checkbox" name="CS" value="VMSC01" id="VMSC01BOX-1">VMSC01
  <br>
  <input type="checkbox" name="CS" value="VMSC02" id="VMSC02BOX-1">VMSC02
  <input type="checkbox" name="CS" value="GMGW01" id="GMGW01BOX-1">GMGW01
  <input type="checkbox" name="CS" value="GMGW02" id="GMGW02BOX-1">GMGW02
  <br>
  <input type="checkbox" name="CS" value="VMGW01" id="VMGW01BOX-1">VMGW01
  <input type="checkbox" name="CS" value="VMGW02" id="VMGW02BOX-1">VMGW02
  <input type="checkbox" name="CS" value="SPS01" id="SPS01BOX-1">SPS01
  <br>
  <input type="checkbox" name="CS" value="SPS02" id="SPS02BOX-1">SPS02
  <input type="checkbox" name="CS" value="HSS01" id="HSS01BOX-1">HSS01
  <input type="checkbox" name="CS" value="HSS02" id="HSS02BOX-1">HSS02
  <br>
</div>
<div>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne015" type="checkbox" id="GMSC01BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne016" type="checkbox" id="GMSC02BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne017" type="checkbox" id="VMSC01BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne018" type="checkbox" id="VMSC02BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne019" type="checkbox" id="GMGW01BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne020" type="checkbox" id="GMGW02BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne021" type="checkbox" id="VMGW01BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne022" type="checkbox" id="VMGW02BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne023" type="checkbox" id="SPS01BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne024" type="checkbox" id="SPS02BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne025" type="checkbox" id="HSS01BOX-2">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne026" type="checkbox" id="HSS02BOX-2">
  </TD>
</div>
</div>

请注意:您应该查看您的 HTML。对我来说这并不完全有效。