GridView中的checkbox的全选和反选在很多的地方都是要求实现的，所以下面就从服务器端和客户端两个方面实现了checkbox的选择,感兴趣的朋友可以了解下，希望本文对你有所帮助
GridView中的checkbox的全选和反选在很多的地方都是要求实现的，所以下面就从服务器端和客户端两个方面实现了checkbox的选择。
1.服务器端
html代码如下：
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1"> <Columns> <asp:TemplateField> <HeaderTemplate> <asp:CheckBox ID="CheckAll" runat="server" OnCheckedChanged="CheckAll_CheckedChanged" AutoPostBack="true" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" /> <asp:BoundField DataField="num" HeaderText="num" SortExpression="num" /> </Columns> </asp:GridView> 其中关于数据的获取不是重点，所以就选择了使用sqldatasource控件来实现数据的获取。 GridView中使用了BoundField绑定了ID,num这两个数据表的字段。在上面的HTML代码中，使用了模板列 <asp:TemplateField> <HeaderTemplate> <asp:CheckBox ID="CheckAll" runat="server" OnCheckedChanged="CheckAll_CheckedChanged" AutoPostBack="true" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" /> </ItemTemplate> </asp:TemplateField>
View Code
header部分是全选的checkbox，item的部分是单个的checkbox部分。 (请注意AutoPostBack要设置为true，要不然无法触动服务器端的代码)
具体的后台的代码：
protected void CheckAll_CheckedChanged(object sender,EventArgs e) { CheckBox ck = sender as CheckBox; if (ck != null) { System.Web.UI.WebControls.GridView g = ck.NamingContainer.NamingContainer as System.Web.UI.WebControls.GridView; for (Int32 i = 0; i < g.Rows.Count; i++) { (g.Rows[i].FindControl("CheckBox1") as CheckBox).Checked = ck.Checked; } } } protected void CheckBox1_CheckedChanged(object sender,EventArgs e) { var count = 0; CheckBox ck = sender as CheckBox; if (ck != null) { System.Web.UI.WebControls.GridView g = ck.NamingContainer.NamingContainer as System.Web.UI.WebControls.GridView; for (Int32 i = 0; i < g.Rows.Count; i++) { if ((g.Rows[i].FindControl("CheckBox1") as CheckBox).Checked) { count++; } } (g.HeaderRow.FindControl("CheckAll") as CheckBox).Checked =count==g.Rows.Count; } }
View Code
运行页面以后，可以看到点击全选的checkbox,可以选择全部。取消了全选的checkbox，那所以的checkbox也取消选中。如果单个的checkbox全选中一个，那全选的checkbox也选中。如果有一个单个的checkbox没有选中，那全选的checkbox也不选中。
2.客户端的实现:
html代码部分，请去除掉两个checkbox的OnCheckedChanged和AutoPostBack。其他的不变。
<script type="text/javascript"> $(function() { $("#GridView1 :checkbox").eq(0).click(function() { if ($(this).is(":checked")) { $(this).parent().parent().nextAll().find(":checkbox").attr("checked", "checked"); } else { $(this).parent().parent().nextAll().find(":checkbox").removeAttr("checked"); } }); $("#GridView1 :checkbox").not($("#GridView1 :checkbox:first")).click(function() { if ($(this).is(":checked")) { if ($("#GridView1 :checked").length == $("#GridView1 :checkbox").length - 1) { $("#GridView1 :checkbox").eq(0).attr("checked", "checked"); } } else { $("#GridView1 :checkbox").eq(0).removeAttr("checked"); } }); }); </script>
View Code
3.普通的html界面的全选与反选
<!DOCTYPE html><html xmlns="/1999/xhtml"><head><title></title><script src="jquery-1.7.1.min.js"></script><script>//复选框事件 //全选、取消全选的事件function selectAll() {if ($("#SelectAll").attr("checked")) {$(":checkbox").attr("checked", true);} else {$(":checkbox").attr("checked", false);}}//子复选框的事件function setSelectAll() {//当没有选中某个子复选框时，SelectAll取消选中 if (!$("#subcheck").checked) {$("#SelectAll").attr("checked", false);}var chsub = $("input[type='checkbox'][id='subcheck']").length; //获取subcheck的个数 var checkedsub = $("input[type='checkbox'][id='subcheck']:checked").length; //获取选中的subcheck的个数 if (checkedsub == chsub) {$("#SelectAll").attr("checked", true);}}</script></head><body><input type="checkbox" id="SelectAll" value="全选" οnclick="selectAll();" /><input type="checkbox" id="subcheck" value="1" οnclick="setSelectAll();" /><input type="checkbox" id="subcheck" value="2" οnclick="setSelectAll();" /><input type="checkbox" id="subcheck" value="3" οnclick="setSelectAll();" /><input type="checkbox" id="subcheck" value="4" οnclick="setSelectAll();" /> </body></html>
View Code
4.使用prop属性实现checkbox的全选与反选
<!DOCTYPE html><html xmlns="/1999/xhtml"><head><title></title><script src="Scripts/jquery.js"></script><script type="text/javascript">$(document).ready(function () {$("#checkAll").click(function () {if ($(this).prop("checked")) {$("input[name='selectFlag']:checkbox").prop("checked", true);} else {$("input[name='selectFlag']:checkbox").prop("checked", false)}});});//子复选框的事件function setSelectAll() {//当没有选中某个子复选框时，SelectAll取消选中 if (!$("#selectFlag").checked) {$("#checkAll").attr("checked", false);}var chsub = $("input[type='checkbox'][id='selectFlag']").length; //获取subcheck的个数 var checkedsub = $("input[type='checkbox'][id='selectFlag']:checked").length; //获取选中的subcheck的个数 if (checkedsub == chsub) {$("#checkAll").attr("checked", true);}}</script></head><body><table><tr><td><input type="checkbox" name="selectFlag" id="checkAll"></td></tr><tr><td><input type="checkbox" name="selectFlag" id="selectFlag" οnclick="setSelectAll()"></td></tr><tr><td><input type="checkbox" name="selectFlag" id="selectFlag" οnclick="setSelectAll()"></td></tr><tr><td><input type="checkbox" name="selectFlag" id="selectFlag" οnclick="setSelectAll()"></td></tr><tr><td><input type="checkbox" name="selectFlag" id="selectFlag" οnclick="setSelectAll()"></td></tr><tr><td><input type="checkbox" name="selectFlag" id="selectFlag" οnclick="setSelectAll()"></td></tr></table></body></html>
View Code
