JQuery checkbox manipulation within a foreach loop
I have made a table as below.
<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>
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.
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);
});
$("#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);
});
<!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>
精彩评论