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 相关文章推荐
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
JS实现self的resend
Jul 22 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
拖动时防止选中
Feb 03 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
JavaScript适配器模式原理与用法实例详解
Mar 09 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
PHP与javascript的两种交互方式
2006/10/09 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
Django框架实现的简单分页功能示例
2018/12/04 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
Qoo10马来西亚:全球时尚和引领潮流的购物市场
2016/08/25 全球购物
美国钻石商店:Zales
2016/11/20 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
个人求职信格式范文
2015/03/20 职场文书
步步惊心观后感
2015/06/12 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏