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

发布于 2024-12-08 06:41:23 字数 6293 浏览 0 评论 0原文

我有一个使用 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 不太熟悉，所以任何指导将不胜感激。

谢谢

编辑

我想做的是改变它，这样我就可以做一些事情。

当主行的复选框被选中时，所有子行都被选中
当主行的复选框被取消选中时，所有子行都被取消选中
当任何复选框被取消选中时，将执行一项检查以检查是否至少有一个子行被选中，否则主行未选择。

为此，我将向每个子行添加一个类元素。类的值将是主行复选框的值。然后，我可以在传递值的主复选框上添加 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，它是每个子复选框用作“类”值的值。我如何更改每个主复选框以包含 onClick 事件，该事件传递所单击的复选框的 id。然后，在 Jquery 函数上使用此 Id 来检查具有与传递的 id 相匹配的类值的任何复选框。（与取消选中类似）。

谢谢

原文

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.

When the checkbox for the master row is selected all children are selected
When the checkbox for teh master row is unselected all childrean are unselected
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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风苍溪 2024-12-15 06:41:23

编辑：

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

示例

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

回复收藏 0 原文

~没有更多了~