复杂嵌套表单批量勾选子复选框技术求助（无法修改类名）

嘿，这问题我熟！你已经成功定位到目标区域并修改了背景色，现在只需要在相同逻辑里加几行代码，就能把.checkboxselect里的所有复选框同步勾选/取消啦。

核心思路很简单：找到目标区域内的所有复选框元素，把它们的checked状态和你点击的父复选框保持一致就行。这里要注意用prop()方法而不是attr()，因为checked是元素的状态属性，prop()能更准确地修改它的选中状态。

修改后的完整代码如下：

$('.selector input').click(function(event) {
  // 先存下当前复选框的选中状态，方便后续复用
  const isChecked = this.checked;
  // 定位到对应的.checkboxselect目标区域
  const targetCheckboxArea = $(this).parents('.row').next('.checkboxselect');
  
  // 关键：同步目标区域内所有复选框的选中状态
  targetCheckboxArea.find('input[type="checkbox"]').prop('checked', isChecked);
  
  // 原来的背景色逻辑可以优化成统一判断
  targetCheckboxArea.css("background-color", isChecked ? "red" : "transparent");
});

几点关键说明： #

• targetCheckboxArea.find('input[type="checkbox"]')：精准锁定目标区域内的复选框，不会误操作页面上其他无关的复选框。
• .prop('checked', isChecked)：把子复选框的选中状态和父复选框完全同步——父勾选则全勾，父取消则全取消。
• 优化了背景色逻辑：用三元运算符替代if-else，代码更简洁，同时补充了取消选中时的背景色恢复（这里默认用transparent，你可以改成页面原本的背景色）。

这样修改后，点击父复选框时，既能触发目标区域变红，还能自动勾选里面所有子复选框；取消父复选框时，子复选框也会跟着取消，背景色也会恢复正常~

内容的提问来源于stack exchange，提问作者Chris