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

您可以这样：

我在每个复选框中添加了一个数据选择器属性，它具有成对的值

如果我们使用类，则有可能覆盖样式

$('[type="checkbox"]').on('change',function(){
  var selector = $(this).data('selector');
  $('[data-selector="'+selector +'"]').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" data-selector ="GMSC01BOX-1" >GMSC01
  <input type="checkbox" name="CS" value="GMSC02" data-selector="GMSC02BOX-1">GMSC02
  <input type="checkbox" name="CS" value="VMSC01" data-selector="VMSC01BOX-1">VMSC01
  <br>
  <input type="checkbox" name="CS" value="VMSC02" data-selector="VMSC02BOX-1">VMSC02
  <input type="checkbox" name="CS" value="GMGW01" data-selector="GMGW01BOX-1">GMGW01
  <input type="checkbox" name="CS" value="GMGW02" data-selector="GMGW02BOX-1">GMGW02
  <br>
  <input type="checkbox" name="CS" value="VMGW01" data-selector="VMGW01BOX-1">VMGW01
  <input type="checkbox" name="CS" value="VMGW02" data-selector="VMGW02BOX-1">VMGW02
  <input type="checkbox" name="CS" value="SPS01" data-selector="SPS01BOX-1">SPS01
  <br>
  <input type="checkbox" name="CS" value="SPS02" data-selector="SPS02BOX-1">SPS02
  <input type="checkbox" name="CS" value="HSS01" data-selector="HSS01BOX-1">HSS01
  <input type="checkbox" name="CS" value="HSS02" data-selector="HSS02BOX-1">HSS02
  <br>
</div>
<div>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne015" type="checkbox" data-selector ="GMSC01BOX-1">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne016" type="checkbox" data-selector="GMSC02BOX-1">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne017" type="checkbox" data-selector="VMSC01BOX-1">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne018" type="checkbox" data-selector="VMSC02BOX-1">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne019" type="checkbox" data-selector="GMGW01BOX-1">
  </TD1
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne020" type="checkbox" data-selector="GMGW02BOX-1">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne021" type="checkbox" data-selector="VMGW01BOX-1">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne022" type="checkbox" data-selector="VMGW02BOX-1">
  </TD>
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne023" type="checkbox" data-selector="SPS01BOX-1">

Answer 2

在复选框的相关组之间，唯一匹配的部分是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。对我来说，这并不完全有效。

Answer 3

我在这里可以想到两种方式

第一：重复的方式使用一个班级，并切换具有相同班级的每个复选框

  $(".box-1").change(function() {
    $(".box-1").prop("checked", this.checked);
  });

  <input type="checkbox" name="CS" value="GMSC01" class="box-1">GMSC01

  <TD class="col-ne col-CS">
    <INPUT name="cf_ne015" type="checkbox" id="GMSC01BOX-2" class="box-1">
  </TD>

在这里拨弄：http://jsfiddle.net/sktnye6p/2/

我最喜欢的方式，也是动态的并且具有可重用性我将使用data-属性

声明一个将用于每个复选框的类

  $(".box").change(function() {
    var index = $(this).data("index");
    let target = $(document).find("[data-index='" + index + "']"); 
    $(target).prop("checked", this.checked);
  });



<input type="checkbox" name="CS" value="GMSC01" class="box" data-index="1">GMSC01
  <TD class="col-ne col-CS">
    <INPUT name="cf_ne015" type="checkbox" class="box" data-index="1">
  </TD>

在这里拨弄：http://jsfiddle.net/sLzgxty0/4/

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

3 个答案: