jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
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>
菜鸟第一次发布,如有不对还望指出
以上所述就是本文的全部内容了,希望大家能够喜欢。
更多jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证相关文章请关注PHP中文网!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中,提供了比标准WordPress主题搜索功能更精致的搜索体验。 令人惊讶的是简单!您将能够将搜索限制为Y

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

本文系列在2017年中期进行了最新信息和新示例。 在此JSON示例中,我们将研究如何使用JSON格式将简单值存储在文件中。 使用键值对符号,我们可以存储任何类型的

增强您的代码演示:开发人员的10个语法荧光笔 在您的网站或博客上共享代码片段是开发人员的常见实践。 选择合适的语法荧光笔可以显着提高可读性和视觉吸引力。 t

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

本文介绍了关于JavaScript和JQuery模型视图控制器(MVC)框架的10多个教程的精选选择,非常适合在新的一年中提高您的网络开发技能。 这些教程涵盖了来自Foundatio的一系列主题

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象,但具体取决于函数的调用方式。 没有当前对象时,this 指代全局对象。在 Web 浏览器中,它由 window 表示。 调用函数时,this 保持全局对象;但调用对象构造函数或其任何方法时,this 指代对象的实例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前,这句话可
