這篇文章主要介紹了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" name="radiobutton" id="uradio3" value="3"> 3 <br> <!-- 復選框 --> <input type="checkbox" name="checkbox" value="1"> 1 <input type="checkbox" name="checkbox" value="2"> 2 <input type="checkbox" name="checkbox" value="3"> 3 <input type="checkbox" name="checkbox" value="4"> 4 <input type="button" id="ucheck" value="確定"> <br> <!-- 復選框的全選和反選 --> <input type="checkbox" name="checkItems" id="checkItems" value="全選/全不選"/>全選/全不選 <br> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="籃球"/>籃球 <input type="checkbox" name="items" value="游泳"/>游泳 <input type="checkbox" name="items" value="唱歌"/>唱歌 <br> <input type="button" name="checkall" id="checkall" value="全選" /> <input type="button" name="checkall" id="checkallNo" value="全不選" /> <input type="button" name="checkall" id="check_revsern" value="反選" /> <!-- 表單驗證 --> <form action=""> 姓名：<input type="text" id="name"><span id="nameid" style="color:#f00;">姓名不能為空！</span><br> 年齡：<input type="text" id="age"/><span id="ageid" style="color:#f00;">年齡不能為空！</span> <br> <input type="button" id="ubu" value="確定" /> </form> </body> </html>菜鳥第一次發布，如有不對還望指出
以上所述就是本文的全部內容了，希望大家能夠喜歡。