Question

I have an HTML document that is generated on the server side using JSP. The output that is produced lists a number of records as HTML. Each record contains a single master record and each master record is associated with several child records.

The master record is displayed in one row with a small icon next to the record id. When clicked, the record expands and the child records are displayed (i.e a DIV layer is made visible). Here is an example HTML output of the HTML.

<!-- Record 1 -->

<tr class="d1">
    <td width="9%" align="left"><input type="checkbox" name="master" value=352></td>
</tr>
<tr>
    <td colspan="8">
        <table class="hwbtable" id="theTable[RandomNumber]" border="0" width="100%" cellpadding="1" cellspacing="0">
            <tr>    
                <td width="6%" align="right"><input name="child" type="checkbox" value=43></td>
            </tr>
            <tr>    
                <td width="6%" align="right"><input name="child" type="checkbox" value=44></td>
            </tr>
            <tr>    
                <td width="6%" align="right"><input name="child" type="checkbox" value=45></td>
            </tr>
            <tr>    
                <td width="6%" align="right"><input name="child" type="checkbox" value=46></td>
            </tr>           
        </table>
    </td>
</tr>

<!-- Record 2 -->

<tr class="d1">
    <td width="9%" align="left"><input type="checkbox" name="master" value=353></td>
</tr>
<tr>
    <td colspan="8">
        <table class="hwbtable" id="theTable[RandomNumber]" border="0" width="100%" cellpadding="1" cellspacing="0">
            <tr>    
                <td width="6%" align="right"><input name="child" type="checkbox" value=53></td>
            </tr>
            <tr>    
                <td width="6%" align="right"><input name="child" type="checkbox" value=54></td>
            </tr>
        </table>
    </td>
</tr>

Next to each record (master or child), there is a checkbox. When the master record’s checkbox is checked, all related child records for that specific group of child records are also checked. This is done using old school javascript by just going through all elements and looking at the values and checking them if they are related to the master record.

There is an onClick event on each master record checkbox. When clicked (i.e. when the master record is checked) i pass the child records to the javascript function. This is passed using Document.theForm.child. This passes all the child records as an array. I also pass the number of records associated with the master record clicked. And i also pass the value of the first child record.

Inside the javascript function i just go through the array of child records until i get to the one which matches the value i passed into the function which matches the first child record. I then use the number of child records to set the next n records to checked.

I know need to now modify this so that if all child records (related to a specific master record) are unchecked, the master record should also be unchecked. I want to modify the whole thing to use Jquery but without modifying the names and values of the checkboxes. I am not very familiar with Jquery so any guidance will be appreciated.

Thanks

Edit

What i want to do is to change it so that i can do to things.

1. When the checkbox for the master row is selected all children are selected
2. When the checkbox for teh master row is unselected all childrean are unselected
3. When any checkbox is unselected, a check is carried out to check that there is at least one child row selected otherwise the master row is unselected.

To do this, i will add a class element to each child row. The value of the class will be the value of the master row checkbox. I can then add an onClick event on the master checkbox passing the value. I would use that value to check/uncheck any checkbox with that value.

Each group of checkboxes will have a different class value depending on the master row. I have seen a couple of Jquery examples but i cant find examples of how to check/uncheck checkboxes based on values/id passed to a function. Here is an example i am working on now

<HTML>
<HEAD>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <SCRIPT language="javascript">
    $(function(){

        // add multiple select / deselect functionality
        $("#selectall").click(function () {
              $('.case').attr('checked', this.checked);
        });

        // if all checkbox are selected, check the selectall checkbox
        // and viceversa
        $(".case").click(function(){

            if($(".case").length == $(".case:checked").length) {
                $("#selectall").attr("checked", "checked");
            } else {
                $("#selectall").removeAttr("checked");
            }

        });
    });
</SCRIPT>

    <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
    <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>

<tr>
    <th><input type="checkbox" id="selectall2"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="selectall2" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="selectall2" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>

<tr>
    <th><input type="checkbox" id="selectall3"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="selectall3" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="selectall3" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>

<tr>
    <th><input type="checkbox" id="selectall4"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="selectall4" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="selectall4" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>

</table>

</BODY>
</HTML>

The example has 4 groups of records. Each master checkbox has an id which is the value used for each child as the ‘class’ value. How can i change each of the master checkboxes to include an onClick event which passes the id of the checkbox that was clicked. This Id is then used on the Jquery function to check any checkbox with a class value that matches the passed id. (similar for unchecking as well).

Thanks

Answer 1

EDIT:

New Requirements: http://jsfiddle.net/mdJQc/2/

$('input[type=checkbox]').click(function() {
    var table = $(this).closest('tr td table'),
        master = table.closest('tr').prev('tr').find('input'),
        isEmpty = !! table.find('input:checked').length,
        isMaster = !master.length;

    if (!isEmpty) master.attr('checked', false);

    if (isMaster) {
        $(this).closest('tr').next('tr').find('input').attr('checked', $(this).is(':checked'))
    }
})

---

You said you already have the check all code, so I just implemented the empty check:

$('input[type=checkbox]').click(function() {
    var table = $(this).closest('tr td table'),
        master = table.closest('tr').prev('tr').find('input'),
        isEmpty = ! table.find('input:checked').length;

    if (isEmpty) master.attr('checked', false);
})

Example