萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery實現按鈕的點擊
jQuery實現按鈕的點擊
這篇文章主要介紹了jQuery實現按鈕的點擊 全選/反選 單選框/復選框 文本框 表單驗證的相關資料,需要的朋友可以參考下
jQuery實現按鈕的點擊 全選/反選 單選框/復選框 文本框 表單驗證
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="jquery-1.4.js"></script> <script type="text/javascript"> $(document).ready(function(){ //按鈕 $("#but").click(function(){ alert("This is my JSP page"); }); //文本框 $("#btext").click(function(){ alert($("#te").val()); }); //下拉框 $("#sel").change(function(){ alert($("#sel").val()); }); //單選框 $("#uradio1").click(function(){ alert($('input[name="radiobuttid=on"]:checked').val()); }); $("#uradio2").click(function(){ alert($('input[name="radiobutton"]:checked').val()); }); $("#uradio3").click(function(){ alert($('input[name="radiobutton"]:checked').val()); }); //復選框 $("#ucheck").click(function(){ var str="";//定義一個數組 $('input[name="checkbox"]:checked').each(function(){//遍歷每一個名字為interest的復選框，其中選中的執行函數 str+=$(this).val();//將選中的值添加到數組chk_value中 }); alert(str); }); //全選 $("#checkall").click(function(){ $("input[name='items']").attr("checked",true); }); //全不選 $("#checkallNo").click(function(){ $("input[name='items']").attr("checked",false); }); //反選 $("#check_revsern").click(function(){ $("input[name='items']").each(function(){ $(this).attr("checked", !$(this).attr("checked")); }); }); //全選/反選 $("#checkItems").click(function(){ $("input[name='items']").attr("checked",$(this).get(0).checked); }); //表單驗證 $("#nameid").hide(); $("#ageid").hide(); $("#ubu").click(function(){ if($("#name").val()==""){ $("#nameid").show(); $("#nameid").fadeOut(3000); return false; }else if($("#age").val()==""){ $("#ageid").show(); $("#ageid").fadeOut(3000); return false; } alert($("#sel").val()); alert("姓名："+$("#name").val()+" "+"年齡"+$("#age").val() ); }); }); </script> </head> <body> <!-- 按鈕 --> <input type="button" value="確認" id="but"/><br> <!-- 文本框 --> <input type="text" name="text" id="te" /><input type="button" id="btext" value="取值"><br> <!-- 下拉框 --> <select id="sel"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <!-- 單選框 --> <input type="radio" name="radiobutton" id="uradio1" value="1"> 1 <input type="radio" name="radiobutton" id="uradio2" value="2"> 2 <input type="radio&quojavascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved