Question

我有一个使用JSP在服务器端生成的HTML文档。生成的输出将许多记录列为HTML。每条记录包含一条主记录，每条主记录与多条子记录相关联。

主记录显示在一行中，记录ID旁边有一个小图标。单击时，记录将展开并显示子记录（即DIV图层可见）。这是HTML的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>

每个记录（主人或孩子）旁边都有一个复选框。选中主记录复选框后，还会检查该特定子记录组的所有相关子记录。这是通过使用旧学校javascript完成的，只需浏览所有元素并查看值并检查它们是否与主记录相关。

每个主记录复选框上都有一个onClick事件。单击时（即检查主记录时），我将子记录传递给javascript函数。这是使用Document.theForm.child传递的。这会将所有子记录作为数组传递。我还传递了与单击的主记录关联的记录数。而且我也传递了第一个儿童记录的价值。

在javascript函数中，我只需要查看子记录数组，直到找到与传递给与第一个子记录匹配的函数的值匹配的值。然后我使用子记录的数量来设置要检查的下n个记录。

我知道现在需要修改它，以便在未选中所有子记录（与特定主记录相关）时，也应取消选中主记录。我想修改整个事情来使用Jquery但不修改复选框的名称和值。我对Jquery不是很熟悉所以任何指导都将不胜感激。

谢谢

修改

我想要做的就是改变它，这样我才能做到。

选中主行的复选框后，将选择所有子项
取消选中teh主行的复选框后，将取消选中所有childrean
如果取消选中任何复选框，则会执行检查以检查是否至少选择了一个子行，否则将取消选择主行。

为此，我将为每个子行添加一个类元素。类的值将是主行复选框的值。然后，我可以在传递值的主复选框上添加onClick事件。我会使用该值来检查/取消选中具有该值的任何复选框。

每组复选框都有不同的类值，具体取决于主行。我已经看到了几个Jquery示例，但我找不到基于传递给函数的值/ id来检查/取消选中复选框的示例。这是我正在处理的一个例子

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

该示例有4组记录。每个主复选框都有一个id，它是每个子项使用的值，作为“class”值。如何更改每个主复选框以包含onClick事件，该事件传递已单击的复选框的ID。然后在Jquery函数上使用此Id来检查具有与传递的id匹配的类值的任何复选框。（类似于取消选中）。

由于

Answer 1

编辑：

新要求：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'))
    }
})

<小时/> 你说你已经检查了所有代码，所以我只是实现了空检查：

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

使用Jquery或Javascript处理组中的复选框

修改

1 个答案: