si coché cocher autre décochez

Question

quelqu'un peut-il m'aider avec un peu de déplacement et de la logique ici s'il vous plaît. la logique est la suivante:

1. Si une case est cochée dans la colonne 3, cochez la case de la première colonne.
2. si aucune dans la colonne 3 est sélectionnée, décocher la case à colonne1

3. si la case colonne1 est cochée, décochez toutes les cases à colonne3

   <table> 
       <tr> 
        <td><input class="isSelected" type="checkbox" /></td> 
        <td>row1col2</td> 
        <td><input class="actionItem" type="checkbox" /><input class="actionItem" type="checkbox" /></td> 
       </tr> 
       <tr> 
        <td><input class="isSelected" type="checkbox" /></td> 
        <td>row2col2</td> 
        <td><input class="actionItem" type="checkbox" /><input class="actionItem" type="checkbox" /></td> 
       </tr> 
       <tr> 
        <td><input class="isSelected" type="checkbox" /></td> 
        <td>row3col2</td> 
        <td><input class="actionItem" type="checkbox" /><input class="actionItem" type="checkbox" /></td> 
       </tr> 
   </table> 
   

Answer 1

Voici une approche: http://jsfiddle.net/mblase75/NDh2g/

$('table tr').find('input:checkbox:first').change(function() { 
    var $this = $(this); 
    $this.closest('tr').find('input:checkbox').prop('checked', $this.prop('checked')); 
}); 

$('table tr').find('input:checkbox:not(":first")').change(function() { 
    var tmp = true; 
    var $this = $(this); 
    $this.closest('tr').find('input:checkbox:not(":first")').each(function() { 
     tmp &= $(this).prop('checked'); 
    }); 
    $this.closest('tr').find('input:checkbox:first').prop('checked',tmp); 
}); 

Answer 2

Je suppose que vous souhaitez également décocher tous les éléments de la 3ème colonne lorsque la case à cocher de la première colonne est décochée.

Essayez ceci: http://jsfiddle.net/MTPFK/1/

$("input.actionItem").change(function() { 
    var $t = $(this); 
    var checked = ($t.closest("td").find("input.actionItem:checked").length > 0); 
    $t.closest("tr").find("input.isSelected").prop("checked", checked); 
}); 

$("input.isSelected").change(function() { 
    var $t = $(this); 
    var status = $t.prop("checked"); 
    $t.closest("tr").find("input.actionItem").prop("checked", status); 
}); 

Notez que celui-ci utilise les noms de classe pour distinguer entre les différents types de cases à cocher, pas la colonne ils sont dans

Pour cibler explicitement les colonnes, vous pouvez le faire. Quelque chose comme ceci: http://jsfiddle.net/NvCDp/

$("tr > td:nth-child(3)").find("input.actionItem").change(function() { 
    var $t = $(this); 
    var checked = $t.prop("checked") ? true : ($t.siblings("input:checked").length > 0); 
    $("td:first", $t.closest("tr")).find("input") 
      .prop("checked", checked); 
}); 

$("tr > td:first-child").find("input.isSelected").change(function() { 
    var $t = $(this); 
    var checked = $t.prop("checked"); 
    $t.closest("tr").find("td:nth-child(3) input.actionItem") 
      .prop("checked", checked); 
});