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 相关文章推荐
javascript 表单规则集合对象
Jul 21 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 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中改变图片的尺寸大小的代码
2011/07/17 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
浅谈javascript语法和定时函数
2015/05/03 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
高中美术教学反思
2014/01/19 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
老公保证书范文
2014/04/29 职场文书
五分钟演讲稿
2014/04/30 职场文书
会计电算化专业求职信
2014/06/10 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL