JQuery checkbox manipulation within a foreach loop

问题:

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

回答1:

for first point you can do this...

if($('.chk').is(':checked')){
 //perform the action in controller
}

for second point -

$(".selectAll").click(function(){
  var checked = $("#selectall").attr("checked");
  $(".chk").attr("checked",checked);
}

for third point -

$(".chk").click(function(){
 var checkedBoxes= $(".selectone").map(function(){ return jQuery(this).attr("checked");}).get();
 var flg = true;
 if(jQuery.inArray(false, net)){
   flg= false;
 }
 $("#selectall").attr("checked",flg);
});

回答2:

$("#selectall").click(function(){
    var checked = $("#selectall").attr("checked");
    $(".selectone").attr("checked",checked);
});

For setting select all

 $(".selectone").click(function(){
   var net = $(".selectone").map(function(){ return jQuery(this).attr("checked");}).get();
   var flg = true;
   if(jQuery.inArray(false, net)){
     flg= false;
   }
   $("#selectall").attr("checked",flg);
 });

回答3:

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