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

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

javascript jquery jsp checkbox

使用Jquery或Javascript处理组中的复选框,javascript,jquery,jsp,checkbox,Javascript,Jquery,Jsp,Checkbox,我有一个使用JSP在服务器端生成的HTML文档。生成的输出以HTML的形式列出了许多记录。每个记录包含一个主记录，每个主记录与多个子记录关联主记录显示在一行中，记录id旁边有一个小图标。单击时，记录展开并显示子记录（即显示一个DIV层）。下面是HTML的HTML输出示例  <tr class="d1"> <td width="9%" align="left"><input type="checkbox" na

我有一个使用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不是很熟悉，因此希望您能提供指导

谢谢

编辑我想做的是改变它，这样我就可以做的事情

选中主行的复选框后，将选中所有子行

当取消选中主行的复选框时，将取消选中所有Children

当取消选中任何复选框时，将执行检查以检查是否至少选择了一个子行，否则将取消选中主行为此，我将向每个子行添加一个class元素。类的值将是主行复选框的值。然后，我可以在传递值的主复选框上添加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>


$（函数（）{
//添加多个选择/取消选择功能
$（“#选择全部”）。单击（函数（）{
$（'.case'）.attr（'checked'，this.checked）；
});
//如果选中了所有复选框，请选中selectall复选框
//维切维萨呢
$（“.case”）。单击（函数（）{
if（$（“.case”）.length==$（“.case:已选中”）.length）{
$（“选择全部”）.attr（“选中”、“选中”）；
}否则{
$（“#selectall”）。删除属性（“选中”）；
}
});
});
多个复选框选择/取消选择-演示
多个复选框选择/取消选择-演示
手机
评级
黑莓黑体9650
2/5
三星银河
3.5/5
手机
评级
黑莓黑体9650
2/5
三星银河
3.5/5
手机
评级
黑莓黑体9650
2/5
三星银河
3.5/5
手机
评级
黑莓黑体9650
2/5
三星银河
3.5/5

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

谢谢

编辑：

新要求：

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

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

您还可以提供您现有的javascript吗？你有没有尝试过在jquery中编写这些内容？@kingjiv-查看更新。不管怎样，我可以使用元素的ID或类而不是tr，td来查找元素吗？

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