您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jQuery实现按钮的点击
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要介绍了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&quo- 上一个程序编程： jquery实现带缩略图的全屏图片画廊效果实例
- 下一个程序编程： jquery实现两个图片渐变切换效果的方法
