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


Posted in Javascript onJune 25, 2015

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>

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

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

Javascript 相关文章推荐
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
JavaScript中的 new 命令
May 22 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 #Javascript
javascript实现跨域的方法汇总
Jun 25 #Javascript
浅谈JavaScript字符串拼接
Jun 25 #Javascript
javascript最基本的函数汇总
Jun 25 #Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 #Javascript
javascript中的Function.prototye.bind
Jun 25 #Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 #Javascript
You might like
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
dojo 之基础篇
2007/03/24 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
Python break语句详解
2014/03/11 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
使用python实现ANN
2017/12/20 Python
flask中的wtforms使用方法
2018/07/21 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
英文求职信结束语大全
2013/10/26 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
党员公开承诺书2015
2015/01/21 职场文书
运动会100米广播稿
2015/08/19 职场文书
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers