开发者

Jquery to get the rows with checked checkboxes in an html table in asp.net mvc

I have made a table as below.

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

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=开发者_Go百科"chkSelectAll) is checked.
  3. After selecting all by checking the chkSelectAll checkbox, and unchecking anyone should uncheck the chkSelectAll checkbox.


<!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">
            &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>
        <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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜