jQuery實現按鈕的點擊 全選/反選 單選框/復選框 文本框 表單驗證
<!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> 菜鳥第一次發布，如有不對還望指出
以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
