Javascript 如何在不使用id的情况下智能地选择特定的div

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

$（文档）.ready（函数（）{
$（“#GMSC01BOX-1”）。更改（函数（）{
$（“#GMSC01BOX-2”）.prop（“选中”，this.checked）；
});
$（“#GMSC01BOX-2”）。更改（函数（）{
$（“#GMSC01BOX-1”）.prop（“选中”，this.checked）；
});
$（“#GMSC02BOX-1”）。更改（函数（）{
$（“#GMSC02BOX-2”）.prop（“已选中”，此项已选中）；
});
$（“#GMSC02BOX-2”）。更改（函数（）{
$（“#GMSC02BOX-1”）.prop（“选中”，this.checked）；
});
$（“#VMSC01BOX-1”）.change（函数（）{
$（“#VMSC01BOX-2”）.prop（“选中”，this.checked）；
});
$（“#VMSC01BOX-2”）.change（函数（）{
$（“#VMSC01BOX-1”）.prop（“选中”，this.checked）；
});
$（“#VMSC02BOX-1”）.change（函数（）{
$（“#VMSC02BOX-2”）.prop（“选中”，this.checked）；
});
$（“#VMSC02BOX-2”）.change（函数（）{
$（“#VMSC02BOX-1”）.prop（“选中”，this.checked）；
});
$（“#GMGW01BOX-1”）。更改（函数（）{
$（#GMGW01BOX-2“）.prop（“已选中”，此项已选中）；
});
$（“#GMGW01BOX-2”）。更改（函数（）{
$（#GMGW01BOX-1“）.prop（“已选中”，此项已选中）；
})；

GMSC01
GMSC02
VMSC01


VMSC02
GMGW01
GMGW02


VMGW01
VMGW02
SPS01


SPS02
HSS01
HSS02

您可以这样做：

我在每个复选框中添加了一个数据选择器属性，它的值与对的值相同

如果我们使用类，那么就有可能重写样式

$（'[type=“checkbox”]'）。在（'change'，function（）上{
变量选择器=$（this）.data（'selector'）；
$（“[data selector=“”+selector+“]”]'）.prop（“选中”，this.checked）；
})；

GMSC01
GMSC02
VMSC01


VMSC02
GMGW01
GMGW02


VMGW01
VMGW02
SPS01


SPS02
HSS01
HSS02


我可以想出两种方法

第一：重复的方式
使用一个类并使用同一个类切换每个复选框

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

$（.box-1”）.change（函数（）{
$（“.box-1”）.prop（“选中”，此为.checked）；
});
GMSC01

在这里拉小提琴：

我最喜欢的方式，也是动态的和可重用的
我将使用data-attribute

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

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

$（“.box”）.change（函数（）{
var指数=$（此）.data（“指数”）；
让target=$（document）.find（“[dataindex='”+index+”）”；
$（target.prop（“选中”，this.checked）；
});
GMSC01

在此处拨动：
在复选框的相关组之间，唯一匹配的部分是
id
的前6位数字。您可以使用来检查匹配的
id
部分是否有任何其他复选框：


$（文档）.ready（函数（）{
$（'[type=“checkbox”]'）。在（'change'，function（）上{
var idMachedPart=这个.id.子字符串（0,6）；
var status=已选中此项；
$（'[type=checkbox]'）。每个（函数（）{
if（此.id.startsWith（idMachedPart））
$（this.prop（'checked'，状态）；
});
});
})；

GMSC01
GMSC02
VMSC01


VMSC02
GMGW01
GMGW02


VMGW01
VMGW02
SPS01


SPS02
HSS01
HSS02