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>菜鸟第一次发布，如有不对还望指出
以上所述就是本文的全部内容了，希望大家能够喜欢。
易网时代-编程资源站