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 相关文章推荐
动态加载iframe
Jun 16 Javascript
jQuery find和children方法使用
Jan 31 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
js格式化时间的方法
Dec 18 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
浅析Vue 生命周期
Jun 21 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
快速解决element的autofocus失效问题
2020/09/08 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
应征英语教师求职信
2013/11/27 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
任长霞观后感
2015/06/16 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS