Jquery在asp.net mvc的html表中获取带有选中复选框的行
Posted
技术标签:
【中文标题】Jquery在asp.net mvc的html表中获取带有选中复选框的行【英文标题】：Jquery to get the rows with checked checkboxes in an html table in asp.net mvc 【发布时间】：2011-06-16 08:03:16 【问题描述】：我做了一个如下表。
<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>
我需要实现以下目标：
-
通过选中复选框 (
name="chkItem") 在控制器中对选中的行执行操作。
选中复选框 (name="chkSelectAll) 时选中/取消选中复选框 (name="chkItem")。
通过选中 chkSelectAll 复选框选择全部后，取消选中任何人都应取消选中 chkSelectAll 复选框。
【问题讨论】：
你的问题是什么？在尝试实现您可能想询问的那些要求时，您可能遇到过任何特殊问题吗？ 我已将我的问题移至***.com/questions/4813610/… 【参考方案1】：<!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>
【讨论】：
以上是关于Jquery在asp.net mvc的html表中获取带有选中复选框的行的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery asp.net mvc 将多个数据插入到数据库中的 2 个表中
ASP.Net MVC在AspNet Mvc使用JQuery AutoComplete组件
[Asp.net mvc]jquery.form.js无刷新上传