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

Question

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:

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

And what is your question? Any particular problems you might have encountered while trying to implement those requirements you might want to ask about? — Darin Dimitrov
– Darin Dimitrov, Commented Jan 27, 2011 at 7:18
I have moved my question to stackoverflow.com/questions/4813610/… — Suja Shyam
– Suja Shyam, Commented Jan 27, 2011 at 8:43

Thulasiram · Accepted Answer · 2012-05-01 14:53:15Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related