jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="https://www.jb51.net/<%=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 type="text/css" href="https://www.jb51.net/styles.css"> --> <script type="text/javascript" src="https://www.jb51.net/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="确认"/><br> <!-- 文本框 --> <input type="text" /><input type="button" value="取值"><br> <!-- 下拉框 --> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <!-- 单选框 --> <input type="radio" value="1"> 1 <input type="radio" value="2"> 2 <input type="radio" value="3"> 3 <br> <!-- 复选框 --> <input type="checkbox" value="1"> 1 <input type="checkbox" value="2"> 2 <input type="checkbox" value="3"> 3 <input type="checkbox" value="4"> 4 <input type="button" value="确定"> <br> <!-- 复选框的全选和反选 --> <input type="checkbox" value="全选/全不选"/>全选/全不选 <br> <input type="checkbox" value="足球"/>足球 <input type="checkbox" value="篮球"/>篮球 <input type="checkbox" value="游泳"/>游泳 <input type="checkbox" value="唱歌"/>唱歌 <br> <input type="button" value="全选" /> <input type="button" value="全不选" /> <input type="button" value="反选" /> <!-- 表单验证 --> <form action=""> 姓名：<input type="text"><span>姓名不能为空！</span><br> 年龄：<input type="text"/><span>年龄不能为空！</span> <br> <input type="button" value="确定" /> </form> </body> </html>
菜鸟第一次发布，如有不对还望指出