选中并取消选中复选框

Question

I've got a page where I have 2 sets of checkboxes. When a checkbox on the bottom in Set 2 gets checked off it checks off its corresponding checkbox in the set 1 above it. Here's the thing, I have an "Add" button under the first set 1 of checkboxes that duplicates the set 2 of checkboxes. However, this is only to add another line item to a specific department.

So a user can issue a workorder with multiple tasks for multiple departments attached to it.

SEE EDIT FOR DETAILED EXPLANATION.

The problem now is that the first lineup item check offs work but any other lineup item I add doesn't work when checking off.

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

You can take a look at my jquery in this jsfiddle for code to see what I tried: http://jsfiddle.net/Bg5Uk/

EDIT: Going to try to explain how this works again.

A tool (lets call it Tool X) is ready to be kicked off and manufactured so a manager has to submit a work order to his employees.

• The manager will create a work order for Tool X and will be presented with something similar to the form in my fiddle.

• Now, the manager wants multiple "Tasks" (Lineups) completed for Tool X and each "Task" will be assigned to a separate department.

• The manager starts filling out Task 1 (Lineup #1) and once completed, he checks off C - CAD on the lineup. This will check off CAD in the above set. So, the workorder will now notify the CAD department of the Workorder so they can start the work.

• The manager isn't done, now he wants to fill out 2 more Tasks. He'll have to click the "ADD" button at the bottom of the form to add another TASK form (Line up #2). He fills it out and checks off M - CNC and S - SHOP which will check off CNC and SHOP in the first set of checkboxes above.

• Now the workorder not only has CAD assigned to it, but it also has CNC and SHOP, which will also be notified, however, their work is related to Task 2 (Lineup #2).

• Finally, the manager creates one last task (lineup #3). Task 3, he checks off D - DESIGN and S - SHOP. Which will check off just Design in Set 1 of the checkboxes, don't forget, Shop has already been checked off so they will be notified of the Workorder already. They'll know that Task 3 is also for them to complete because I've already got that part working.

Now, when the manager submits the workorder, CAD, CNC, SHOP, and DESIGN will all get an email notification so they can read the work order and begin their work.

The problem: The check offs are only working on the first Task (1) (Lineup #1). Any other added task will not check off a corresponding department. This is an issue because Task 2 and 3 may have Design and Shop checked off on the Task, but the department will not get an email because they weren't checked off on the first set of checkboxes.

You may be asking yourself, why doesn't the manager just double check the form and check off the departments that the notification and workorder should be sent to. I don't even know the answer, I just think it comes down to laziness and rushing through filling out this stuff.

EDIT 2:

If I use something like below to check the values returning. For the first Lineup checkboxes it returns the checkbox it should be checking off. However, for Lineup #2 when I add a new lineup, nothing gets returned. I don't get it...

$("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

if the code works for the first row, which according to you it does ("The check offs are only working on the first Task (1) (Lineup #1)."), this could most likely fix the problem you're facing:

just replace the given part of your code with this:

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

note that I also changed the attr with prop

UPDATE:

take a look at your code here:

 $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 is not defined for any of your elements here in your template, try defining it for the newly added items here and you're good to go.