foreach 循环中的 JQuery 复选框操作答案

【问题标题】：JQuery checkbox manipulation within a foreach loopforeach 循环中的 JQuery 复选框操作
【发布时间】：2011-01-27 07:03:31
【问题描述】：

我做了一个如下表。

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

我需要实现以下目标：

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

【问题讨论】：

标签： jquery asp.net-mvc-2 jquery-ui jquery-selectors

【解决方案1】：

对于第一点，您可以这样做...

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

第二点——

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

第三点——

$(".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);
});

【讨论】：

对于我的第一部分我尝试给 $("#addSelected").live("click", function(e) { $('#LstDocTemp tr').each(function() { if ($('.chk :checked')) { alert("Clicked"); } }); });但它会提醒所有行“已单击”。
使用这个...if($('.chk').is('checked')){ alert("Clicked"); }...我已经更新了我的答案。让我知道它是否有效？
现在我将其修改为 $("#addSelected").live("click", function(e) { $('#LstDocTemp tr').each(function() { try {alert ($(".chk").is("checked")); if ($('.chk').is('checked')) { alert($(".chk").is(":checked ")) } } 捕捉 (e) { 警报(e); } }); });但即使勾选了 2 个复选框，该值也始终为 false。
我仍然无法找到解决方案 :(
对不起，这是我的错误，我错过了：在检查之前...我已经更新了我的答案再次尝试...我想现在它会为你解决问题...祝你好运！ !:)

【解决方案2】：

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

设置全选

 $(".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>

【讨论】：