jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证

时间：2021-05-26

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>

菜鸟第一次发布，如有不对还望指出

以上所述就是本文的全部内容了，希望大家能够喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章