选中并取消选中复选框

Question

我有一个页面，其中有2套复选框。 当Set 2底部的复选框被选中时，它会选中上方Set 1中的相应复选框。 事情就是这样，我在复选框的第一组1下有一个“添加”按钮，它与复选框的第2组重复。 但是，这只是将另一个订单项添加到特定部门。

因此，用户可以为附有多个部门的多个任务下达具有多个任务的工作单。

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

现在的问题是，第一个选单项签出正常工作，但是我添加的任何其他选单项在签出时都不起作用。

$('.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);
    });
});

您可以在此jsfiddle中查看我的jquery，以查看我尝试的代码： http : //jsfiddle.net/Bg5Uk/

编辑：将尝试解释这又如何工作。

准备好启动一个工具（称为工具X）并进行制造，因此经理必须向其员工提交工单。

• 经理将为Tool X创建一个工单，并向其显示类似于我的小提琴中的表格。

• 现在，经理希望为工具X完成多个“任务”（阵容），每个“任务”将分配到一个单独的部门。

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

• 经理还没有完成，现在他想再填写2个任务。 他将必须单击表单底部的“添加”按钮来添加另一个任务表单（第2行）。 他将其填写并选中M-CNC和S-SHOP，这将在上面的第一组复选框中选中CNC和SHOP。

• 现在，不仅为工作单分配了CAD，而且为工作单分配了CNC和SHOP，它们也将得到通知，但是，它们的工作与任务2（阵容2）有关。

• 最后，经理创建最后一个任务（阵容3）。 任务3，他检查了D-DESIGN和S-SHOP。 它将仅在复选框的集合1中选中“设计”，不要忘记，“商店”已被选中，因此他们将收到工作单通知。 他们会知道任务3也是他们要完成的，因为我已经完成了那部分工作。

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

问题：结帐仅适用于第一个任务（1）（阵容1）。 任何其他添加的任务都不会检查相应部门。 这是一个问题，因为任务2和3可能已在“任务”上选中了“设计和购买”，但是部门未收到电子邮件，因为未在第一组复选框上选中它们。

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

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

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更改了attr

更新：

在这里查看您的代码：

 $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 ，请尝试在此处为新添加的项目定义data-check ，您可以开始使用。