如何在不使用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。对我来说，这并不完全正确。

Answer 2

你可以这样做：

我为每个复选框添加了一个数据选择器属性，它对具有相同的值

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

$('[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 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>

Fiddle here：http://jsfiddle.net/sktnye6p/2/

我最喜欢的方式，也是动态的和可重用的我将使用数据属性

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

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

Fiddle here：http://jsfiddle.net/sLzgxty0/4/