具有类名但在javascript中具有相同类名的多个复选框更改函数

我的html和javascript（带jQuery）代码在这里。 为了更好的可视化，我做了一个片段，请看一看。我在片段下面描述了我的问题

$（文档）.ready（函数（）{
$（'.将\移动到\选项2Checkbox'）。单击（函数（）{
var cca_item_id=$（this）.closest（'tr'）.find（'td option:selected'）.eq（0）.val（）；
控制台日志（cca_项_id）；
});
});

共同国家评估项目
年组
CCA教师
请选择
绘画
游泳
请选择
性病I-A
STD II-B
请选择
xyz
请选择
绘画
游泳
请选择
性病I-A
STD II-B
请选择
xyz
请选择
绘画
游泳
请选择
性病I-A
STD II-B
请选择
xyz
如果在声明“click”处理程序后动态添加后续复选框，则事件将不会绑定到它们，因为执行该代码时它们不存在

一种解决方案是使用jQuery提供的“委派事件”模式。只需将事件绑定到DOM上一级的元素，该元素在执行click处理程序时保证存在，然后将实际要响应事件的（可能是动态创建的）元素的选择器传递给它。然后，当单击更高级别元素中的任何内容时，jQuery负责检查与选择器匹配的新元素，并专门为它们触发单击事件

你是这样写的：

$("#qfdetails").on("click", ".move_to_choice2Checkbox", function () {

在这种情况下，要使用的最接近逻辑的高级元素是表，但如果元素没有其他公共祖先，则可以使用
document
。理想情况下，您应该使用最接近的共同祖先，因为这对性能更有利

有关更多详细信息，请参见标题为“直接和委托事件”的部分。
我不得不指出，您可能会得到
td
兄弟姐妹。您也可以考虑如果您希望遵守我的例子中的选中/未选中状态。您也可以考虑使用更改而不是单击事件，因为值可能会通过代码或其他方式更改。
此外，您的ID可能比使用
最近的、同级的等进行遍历更快。但是它是无效的，因为存在重复的
ID=“cca\u item\u ID”
，这使得您的HTML无效

注意，我把另一个无效的HTML放在原处（其他重复ID）-考虑类，而使用那些来选择.< /P>

$（函数（）{
$（“#qfdetails”）。在（'change'，'上。将_移动到_choice2Checkbox'，函数（）{
如果（选中此项）{
var cca_item_id=$（this）.closest（'td'））
.sides（）.first（）
.find（'option:selected'）.eq（0）.val（）；
控制台日志（cca_项_id）；
}
});
});

共同国家评估项目
年组
CCA教师
请选择
绘画
游泳
请选择
性病I-A
STD II-B
请选择
xyz
请选择
绘画
游泳
请选择
性病I-A
STD II-B
请选择
xyz
请选择
绘画
游泳
请选择
性病I-A
STD II-B
请选择
xyz
这些代码实际上正在工作！我认为问题首先是复选框是静态的，其他复选框是动态的。这个问题的解决方案是什么？嗯，代码似乎工作得很好。。。选择一个值并单击相应的复选框，它将正确记录