CODEWITHSUNDEEP
javascriptjquery
Rod
Rod

Reputation: 15455

if any checked check else uncheck

can someone help me with some traversing and some logic here please. the logic is this:

  1. if any checkbox in column3 is checked then check the first column checkbox.
  2. if none in column 3 is selected, uncheck checkbox in column1

  3. if column1 checkbox is unchecked, then uncheck all checkboxes in column3

    <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>

Upvotes: 0

Views: 183

Answers (2)

Shawn Chin
Shawn Chin

Reputation: 86864

I'm assuming you also want to uncheck all items in the 3rd col when the checkbox in the first col is unchecked.

Try this: 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);   
});

Note that this uses the class names to discriminate between the different checkbox types, not the column they're in.

To explicitly target columns, you could do something like this: 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);
});

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92903

Here's one approach: 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);
});

Upvotes: 2

Related Questions