jquery checkbox 全选 反选 等。。。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Checkbox.aspx.cs" Inherits="FormJsOnlyRead.Checkbox" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head id="Head1" runat="server"> 6 <title>无标题页</title> //这里要说的是jquery 各位可以到网上下载 我这里就不说地址了 记住是1.4.2.min.js 有的使用1.6的话反选是不能实现的 切记 切记、、
7 <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 8 <script type="text/javascript"> 9 jQuery(function ($) { 10 //全选 11 $("#btn1").click(function () { 12 $("input[type='checkbox']").attr("checked", "true"); 13 }) 14 //取消全选 15 $("#btn2").click(function () { 16 $("input[type='checkbox']").removeAttr("checked"); 17 }) 18 //选中所有基数 19 $("#btn3").click(function () { 20 $("input[type='checkbox']:even").attr("checked", "true"); 21 }) 22 //选中所有偶数 23 $("#btn6").click(function () { 24 $("input[type='checkbox']:odd").attr("checked", "true"); 25 }) 26 //反选 27 $("#btn4").click(function () { 28 $("input[type='checkbox']").each(function () { 29 // if ($(this).attr("checked")) { 30 // $(this).removeAttr("checked"); 31 // } 32 // else { 33 // $(this).attr("checked", "true"); 34 // } 35 //alert($(this).attr("checked")) 36 $(this).attr("checked", !this.checked); 37 // $(this).attr("checked", !$(this).attr("checked")); 38 }) 39 }) 40 41 //或许选择项的值 42 var aa = ""; 43 $("#btn5").click(function () { 44 $("input[type='checkbox']:checkbox:checked").each(function () { 45 aa += $(this).val() 46 }) 47 document.write(aa); 48 }) 49 }) 50 </script> 51 </head> 52 <body> 53 <form id="form1" runat="server"> 54 <div> 55 <input type="button" id="btn1" value="全选"> 56 <input type="button" id="btn2" value="取消全选"> 57 <input type="button" id="btn3" value="选中所有奇数"> 58 <input type="button" id="btn6" value="选中所有偶数"> 59 <input type="button" id="btn4" value="反选"> 60 <input type="button" id="btn5" value="获得选中的所有值"> 61 <br> 62 <%-- <input type="checkbox" name="checkbox" value="checkbox1"> 63 checkbox1 64 <input type="checkbox" name="checkbox" value="checkbox2"> 65 checkbox2 66 <input type="checkbox" name="checkbox" value="checkbox3"> 67 checkbox3 68 <input type="checkbox" name="checkbox" value="checkbox4"> 69 checkbox4 --%> 70 <asp:CheckBoxList ID="CheckBoxList1" runat="server"> 71 <asp:ListItem Text="1" Value="1" Selected=True></asp:ListItem> 72 <asp:ListItem Text="2" Value="2"></asp:ListItem> 73 <asp:ListItem Text="3" Value="3"></asp:ListItem> 74 <asp:ListItem Text="4" Value="5"></asp:ListItem> 75 </asp:CheckBoxList> 76 </div> 77 </form> 78 </body> 79 </html>
注意两点:1.Jquery 基类js找1.4
2.服务器控件用 input[type='checkbox']") HTML 用 input[Name='checkbox']")