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

Question

我有一个页面，其中有2组复选框。当Set 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);
    });
});

您可以查看一下本文中的jquery，看看我尝试过的代码：http://jsfiddle.net/Bg5Uk/。

编辑:再试一次解释一下它是如何工作的。

工具(让我们称之为工具X)已经准备好被启动和制造，所以经理必须向他的员工提交一份工作订单。

• 经理将为工具X创建一个工作订单，并将呈现类似于我小提琴中的形式的东西。
• 现在，经理希望为Tool X完成多个“任务”(Lineups)，每个“任务”将被分配到一个单独的部门。
• 经理开始填写任务1(阵容#1)，一旦完成，他会检查线上的CAD。这将检查CAD在上述一套。因此，该工作令现在将通知CAD部门的工作秩序，以便他们可以开始工作。
• 经理还没做完，现在他想多填两个任务。他将不得不单击表单底部的" add“按钮来添加另一个任务表单(第2行)。他填写了它，并检查了M和S-商店，这将检查数控和商店在上面的第一组复选框。
• 现在的工作订单不仅有CAD分配给它，它也有数控和车间，这也将被通知，然而，他们的工作是与任务2(阵容#2)。
• 最后，经理创建最后一个任务(队列#3)。任务3，他检查D-设计和S-商店。这将签下仅设计在第1组的复选框，别忘了，商店已经被取消，所以他们将得到通知的工作秩序已经。他们会知道，任务3也是他们要完成的，因为我已经开始工作了。

现在，当经理提交工作订单时，CAD、CNC、SHOP和DESIGN都会收到电子邮件通知，以便他们能够阅读工作订单并开始工作。

问题:检查只处理第一个任务(1) (队列#1)。任何其他添加的任务都不会检查相应的部门。这是一个问题，因为Task 2和3可能会在任务上取消“设计和商店”，但是部门将不会收到电子邮件，因为它们没有在第一组复选框上被选中。

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

编辑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);
    });
}); 

Answer 1

如果代码适用于第一行(根据您的说法)(“检查只处理第一个任务(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更改了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>';

在模板中没有为您的任何元素定义data-check，在这里尝试为新添加的项定义它，这样就可以了。