当前位置： 文江博客话题详情

Jquery获取asp.net mvc中html表中选中复选框的行

发布于 2024-10-14 09:04:32 字数 4514 浏览 1 评论 0原文

我做了一个表格如下。

<div class="grid_top_button">
                        <div class="left_top_curve">
                            &nbsp;</div>
                        <div class="right_top_curve">
                            &nbsp;</div>
                        <input name="input" type="button" id="addSelected" name="addSelected" class="section_btn"
                            value="Link" /></div><table id="LstDocTemp" border="0" cellpadding="0" cellspacing="0" class="instruction_grid">
    <tr>
       <th align="left" class="ins_sl_no">
                                Sl No.
                            </th>
                            <th align="left" class="selct_column">
                                <input type="checkbox" id="chkSelectAll" name="chkSelectAll" />
                            </th>
                            <th align="left" class="doc_title_1">
                                Document title
                            </th>
                            <th align="left" class="description">
                                Description
                            </th>
                            <th align="center" class="revision">
                                Revision
                            </th>
                            <th align="left" class="part_no">
                                Parts name
                            </th>
                            <th align="center" class="issue_no">
                                Issue
                            </th>
                            <th align="center">
                                Link
                            </th>
                        </tr>
                        <% int slNo = 1; %>
                        <%foreach (var item in Model)
                          { %>
                        <tr id="<%= Html.Encode(item.DocId) %>">
                            <td>
                                <%= slNo %>
                            </td>
                            <td>
                                <input type="checkbox" name="chkItem" class="chk" id="chkbox_<%=Html.Encode(item.DocId) %>" />
                            </td>
                            <td>
                                <%= Html.Hidden("DocTitle", item.DocTitle)%>
                                <a href='<%= Url.Action("DetailsDocumentTemplate", "Document", new { id = item.DocId })%>'>
                                    <%=Html.Encode(item.DocTitle) %></a>
                            </td>
                            <td>
                                <%= Html.Hidden("DocDesc", item.DocDesc)%>
                                <%= Html.Encode(item.DocDesc) %>
                            </td>
                            <td class="dark_highlight">
                                <%= Html.Hidden("DocRevision", item.DocRevision)%>
                                <%= Html.Encode(item.DocRevision) %>
                            </td>
                            <td>
                                <%= Html.Hidden("PartListId", item.PartListId)%>
                                <%= Html.Hidden("PartNo", item.PartNo)%>
                                <%= Html.Encode(item.PartNo) %>
                            </td>
                            <td class="light_highlight">
                                <%= Html.Hidden("IssueNo", item.IssueNo)%>
                                <%=Html.Encode(item.IssueNo) %>
                            </td>
                            <td>
                                <%= Html.Hidden("DocId", item.DocId)%>
                                <a class="icon_add" title="Add">Add</a>
                            </td>
                        </tr>
                        <%slNo++;
                          } %>
                    </table>

我需要实现以下目标：

  1. 在控制器中对通过选中复选框 (name="chkItem") 选择的行执行操作。
  2. 选中复选框 (name="chkSelectAll) 时选中/取消选中复选框 (name="chkItem")。
  3. 通过选中 chkSelectAll 复选框选择全部并取消选中任何人后应取消选中 chkSelectAll 复选框。
原文

I have made a table as below.

<div class="grid_top_button">
                        <div class="left_top_curve">
                             </div>
                        <div class="right_top_curve">
                             </div>
                        <input name="input" type="button" id="addSelected" name="addSelected" class="section_btn"
                            value="Link" /></div><table id="LstDocTemp" border="0" cellpadding="0" cellspacing="0" class="instruction_grid">
    <tr>
       <th align="left" class="ins_sl_no">
                                Sl No.
                            </th>
                            <th align="left" class="selct_column">
                                <input type="checkbox" id="chkSelectAll" name="chkSelectAll" />
                            </th>
                            <th align="left" class="doc_title_1">
                                Document title
                            </th>
                            <th align="left" class="description">
                                Description
                            </th>
                            <th align="center" class="revision">
                                Revision
                            </th>
                            <th align="left" class="part_no">
                                Parts name
                            </th>
                            <th align="center" class="issue_no">
                                Issue
                            </th>
                            <th align="center">
                                Link
                            </th>
                        </tr>
                        <% int slNo = 1; %>
                        <%foreach (var item in Model)
                          { %>
                        <tr id="<%= Html.Encode(item.DocId) %>">
                            <td>
                                <%= slNo %>
                            </td>
                            <td>
                                <input type="checkbox" name="chkItem" class="chk" id="chkbox_<%=Html.Encode(item.DocId) %>" />
                            </td>
                            <td>
                                <%= Html.Hidden("DocTitle", item.DocTitle)%>
                                <a href='<%= Url.Action("DetailsDocumentTemplate", "Document", new { id = item.DocId })%>'>
                                    <%=Html.Encode(item.DocTitle) %></a>
                            </td>
                            <td>
                                <%= Html.Hidden("DocDesc", item.DocDesc)%>
                                <%= Html.Encode(item.DocDesc) %>
                            </td>
                            <td class="dark_highlight">
                                <%= Html.Hidden("DocRevision", item.DocRevision)%>
                                <%= Html.Encode(item.DocRevision) %>
                            </td>
                            <td>
                                <%= Html.Hidden("PartListId", item.PartListId)%>
                                <%= Html.Hidden("PartNo", item.PartNo)%>
                                <%= Html.Encode(item.PartNo) %>
                            </td>
                            <td class="light_highlight">
                                <%= Html.Hidden("IssueNo", item.IssueNo)%>
                                <%=Html.Encode(item.IssueNo) %>
                            </td>
                            <td>
                                <%= Html.Hidden("DocId", item.DocId)%>
                                <a class="icon_add" title="Add">Add</a>
                            </td>
                        </tr>
                        <%slNo++;
                          } %>
                    </table>

I need to achieve the follwing:

  1. Perform action in the controller for the rows which are selected by checking the checkbox (name="chkItem").
  2. Check/uncheck the checkboes (name="chkItem") when the checkbox (name="chkSelectAll) is checked.
  3. After selecting all by checking the chkSelectAll checkbox, and unchecking anyone should uncheck the chkSelectAll checkbox.

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

扫码二维码加入Web技术交流群

发布评论

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

评论（1）

海的爱人是光 2024-10-21 09:04:32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.extend($.expr[':'], {
            unchecked: function (obj) {
                return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
            }
        });

        $(document).ready(function () {
            $('#LstDocTemp').find('#chkSelectAll').live('click', function () {
                $('#LstDocTemp').find('.chkCheckBox').attr('checked', $(this).prop('checked'));
            });

            $('#LstDocTemp').find('.chkCheckBox').live('click', function () {
                $('#LstDocTemp').find('#chkSelectAll').attr('checked', $('#LstDocTemp').find('.chkCheckBox:unchecked').length > 0 ? false : true);
            });
        });
    </script>
</head>
<body>
    <div class="grid_top_button">
        <div class="left_top_curve">
             </div>
        <div class="right_top_curve">
             </div>
        <input name="input" type="button" id="addSelected" name="addSelected" class="section_btn"
            value="Link" />
    </div>
    <table id="LstDocTemp" border="0" cellpadding="0" cellspacing="0" class="instruction_grid">
        <tr>
            <th align="left" class="ins_sl_no">
                Sl No.
            </th>
            <th align="left" class="selct_column">
                <input type="checkbox" id="chkSelectAll" name="chkSelectAll" />
            </th>
            <th align="left" class="doc_title_1">
                Document title
            </th>
            <th align="left" class="description">
                Description
            </th>
            <th align="center" class="revision">
                Revision
            </th>
            <th align="left" class="part_no">
                Parts name
            </th>
            <th align="center" class="issue_no">
                Issue
            </th>
            <th align="center">
                Link
            </th>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="checkbox" name="chkItem" class="chk chkCheckBox" id="chkbox_" />
            </td>
            <td>
                <a>test</a>
            </td>
            <td>
                Test
            </td>
            <td class="dark_highlight">
            </td>
            <td>
            </td>
            <td class="light_highlight">
            </td>
            <td>
                <a class="icon_add" title="Add">Add</a>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="checkbox" name="chkItem" class="chk chkCheckBox" id="Checkbox1" />
            </td>
            <td>
                <a>test</a>
            </td>
            <td>
                Test
            </td>
            <td class="dark_highlight">
            </td>
            <td>
            </td>
            <td class="light_highlight">
            </td>
            <td>
                <a class="icon_add" title="Add">Add</a>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="checkbox" name="chkItem" class="chk chkCheckBox" id="Checkbox2" />
            </td>
            <td>
                <a>test</a>
            </td>
            <td>
                Test
            </td>
            <td class="dark_highlight">
            </td>
            <td>
            </td>
            <td class="light_highlight">
            </td>
            <td>
                <a class="icon_add" title="Add">Add</a>
            </td>
        </tr>
    </table>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.extend($.expr[':'], {
            unchecked: function (obj) {
                return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
            }
        });

        $(document).ready(function () {
            $('#LstDocTemp').find('#chkSelectAll').live('click', function () {
                $('#LstDocTemp').find('.chkCheckBox').attr('checked', $(this).prop('checked'));
            });

            $('#LstDocTemp').find('.chkCheckBox').live('click', function () {
                $('#LstDocTemp').find('#chkSelectAll').attr('checked', $('#LstDocTemp').find('.chkCheckBox:unchecked').length > 0 ? false : true);
            });
        });
    </script>
</head>
<body>
    <div class="grid_top_button">
        <div class="left_top_curve">
             </div>
        <div class="right_top_curve">
             </div>
        <input name="input" type="button" id="addSelected" name="addSelected" class="section_btn"
            value="Link" />
    </div>
    <table id="LstDocTemp" border="0" cellpadding="0" cellspacing="0" class="instruction_grid">
        <tr>
            <th align="left" class="ins_sl_no">
                Sl No.
            </th>
            <th align="left" class="selct_column">
                <input type="checkbox" id="chkSelectAll" name="chkSelectAll" />
            </th>
            <th align="left" class="doc_title_1">
                Document title
            </th>
            <th align="left" class="description">
                Description
            </th>
            <th align="center" class="revision">
                Revision
            </th>
            <th align="left" class="part_no">
                Parts name
            </th>
            <th align="center" class="issue_no">
                Issue
            </th>
            <th align="center">
                Link
            </th>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="checkbox" name="chkItem" class="chk chkCheckBox" id="chkbox_" />
            </td>
            <td>
                <a>test</a>
            </td>
            <td>
                Test
            </td>
            <td class="dark_highlight">
            </td>
            <td>
            </td>
            <td class="light_highlight">
            </td>
            <td>
                <a class="icon_add" title="Add">Add</a>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="checkbox" name="chkItem" class="chk chkCheckBox" id="Checkbox1" />
            </td>
            <td>
                <a>test</a>
            </td>
            <td>
                Test
            </td>
            <td class="dark_highlight">
            </td>
            <td>
            </td>
            <td class="light_highlight">
            </td>
            <td>
                <a class="icon_add" title="Add">Add</a>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="checkbox" name="chkItem" class="chk chkCheckBox" id="Checkbox2" />
            </td>
            <td>
                <a>test</a>
            </td>
            <td>
                Test
            </td>
            <td class="dark_highlight">
            </td>
            <td>
            </td>
            <td class="light_highlight">
            </td>
            <td>
                <a class="icon_add" title="Add">Add</a>
            </td>
        </tr>
    </table>
</body>
</html>
回复 原文
~没有更多了~

关于作者

情何以堪。

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

linfzu01

文章 0 评论 0

§对你不离不弃

文章 0 评论 0

可遇━不可求

文章 0 评论 0

枕梦

文章 0 评论 0

qq_3LFa8Q

文章 0 评论 0

JP

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文