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']")