Javascript 单击另一个复选框时选中并取消选中该复选框

我有一个页面，其中有两组复选框。当选中集合2中底部的复选框时，它将选中其上方集合1中相应的复选框。事情是这样的，我在第一组1的复选框下有一个“添加”按钮，它复制了第二组复选框。但是，这只是将另一行项目添加到特定部门

因此，用户可以为多个部门发布包含多个任务的工作单

有关详细说明，请参见编辑

现在的问题是，第一个列表项签出可以工作，但我添加的任何其他列表项在签出时都不工作

$('.cad, .design, .shop, .cnc').on('change', function() {
    // Split into space-delimited array in case we want
    // to check off more than one
    var elemsToCheck = $(this).data('check').split(' ');
    var checked = $(this).attr('checked');
    $.each(elemsToCheck, function() {
        $('#' + this).attr('checked', !!checked);
    });
});

您可以在这个JSFIDLE代码中查看我的jquery，看看我尝试了什么：

编辑：再次尝试解释这是如何工作的

一个工具（我们称之为工具X）已经准备好启动和制造，因此经理必须向其员工提交工作指令

• 经理将为工具X创建一份工作单，并将收到类似于我小提琴中表格的东西

• 现在，经理希望为工具X完成多个“任务”（列表），每个“任务”将分配给单独的部门

• 经理开始填写任务1（列表1），完成后，检查列表中的C-CAD。这将检查上述集合中的CAD。因此，工单现在将通知CAD部门工单，以便他们可以开始工作

• 经理还没做完，现在他想再完成两项任务。他必须点击表单底部的“添加”按钮来添加另一个任务表单（排队2）。他填写了表格，并检查了M-CNC和S-SHOP，后者将在上面的第一组复选框中检查CNC和SHOP

• 现在，工单不仅分配了CAD，还分配了CNC和车间，也会通知他们，但是，他们的工作与任务2（排列2）有关

• 最后，经理创建最后一个任务（列表3）。任务3，他检查了D-DESIGN和S-SHOP。这将勾选第1组复选框中的设计，别忘了，商店已经被勾选了，所以他们已经收到了工作订单的通知。他们会知道任务3也是他们要完成的，因为我已经让那个部分工作了

现在，当经理提交工单时，CAD、CNC、车间和设计部门都会收到电子邮件通知，以便他们阅读工单并开始工作

问题是：检查只对第一个任务（1）（排列1）起作用。任何其他添加的任务都不会勾选相应的部门。这是一个问题，因为任务2和任务3可能在任务中勾选了Design and Shop，但部门不会收到电子邮件，因为它们没有在第一组复选框中勾选

你可能会问自己，为什么经理不仔细检查一下表格，检查一下应该发送通知和工作单的部门。我甚至不知道答案，我只是认为这归结为懒惰和匆忙填写这些东西

编辑2：

如果我使用下面的方法来检查返回的值。对于第一个列表复选框，它将返回应选中的复选框。但是，对于Lineup#2，当我添加新的阵容时，不会返回任何内容。我不明白

$("input[name^='lineitem']").on('change', function() {
    var elemsToCheck = $(this).data('check').split(' ');
    var checked = $(this).prop('checked');
    alert(elemsToCheck); //returns cad, design, shop, cnc, etc.
    $.each(elemsToCheck, function() {
        $('#' + this).prop('checked', !!checked);
    });
}); 

---

如果代码适用于第一行，而您认为它适用于第一行（“检查只适用于第一个任务（1）（列表1）），这很可能解决您面临的问题：

只需将代码的给定部分替换为以下内容：

$(document).on('change','.cad, .design, .shop, .cnc', function() {
    var elemsToCheck = $(this).data('check').split(' ');
    var checked = $(this).prop('checked');
    $.each(elemsToCheck, function() {
        $('#' + this).prop('checked', !!checked);
    });

注意，我还用

prop

更新：

请在此处查看您的代码：

 $template = '<tr>\
            <td><input type="hidden" id="number" value="${num}" /><input style="width:20px" class="number" name="lineitem[${num}][num]" value="${num}" /></td>\
            <td>\
            <ul>\
            <li><input class="cad" type="checkbox" name="lineitem[${num}][affects][cad]" /><label><strong>C</strong> - CAD</label></li>\
            <li><input class="design" type="checkbox" name="lineitem[${num}][affects][design]" /><label><strong>D</strong> - DESIGN</label></li>\
            <li><input class="shop" type="checkbox" name="lineitem[${num}][affects][shop]" /><label><strong>S</strong> - SHOP</label></li>\
            <li><input class="cnc" type="checkbox" name="lineitem[${num}][affects][cnc]" /><label><strong>M</strong> - CNC</label></li>\
            </ul>\
            </td>\
            <td>\
            <ul>\
            <li><input type="checkbox" name="lineitem[${num}][engineering_changes]" /><label>Engineering</label></li>\
            <li><input type="checkbox" name="lineitem[${num}][correction_changes]" /><label>Correction</label></li>\
            </ul>\
            </td>\
            <td><textarea style="width:100%; height:100%" name="lineitem[${num}][desc]"></textarea></td>\
            <td><a class="remove" href="javascript:void(0)">Remove</a></td>\
            </tr>';

$template=”\
\
\
\
C-CAD
\
D-设计
\
S-购物
\
M-CNC
\
\
\
\
\
工程
\
更正
\
\
\
\
\
';

---

数据检查

没有为模板中的任何元素定义，请尝试在此处为新添加的项目定义数据检查，这样就可以了。

查看我的答案，看看这是否对您有帮助。我不知道该怎么做，但是阅读您的问题，您似乎希望将单击事件委托给父元素：

$（'.lineitems'）.on（'change'、'.cad、.design、.shop、.cnc'，function（）{}）是否可以使用单选按钮分组来完成此任务？不清楚您想要完成什么任务，介意简化吗？@AminJafari我会尝试，我知道它的复杂阵容第一个阵容正在使用此代码，但第二个或第三个没有。错误：未捕获类型错误：无法读取未定义的属性“split”这是因为未定义新添加项的
数据（'check'）
，请尝试再次检查它，因为错误本身意味着它正在触发
单击事件！查看您的代码，我找不到任何您定义了
数据（'check'）
的代码。在jQuery中，P.S.
live
已被弃用，请尝试在
上使用
。哇！我不敢相信是这样的。。。完全被忽视了。这似乎解决了问题。干得好，非常感谢阿明。