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 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
vue之延时刷新实例
Nov 14 Javascript
JS实现图片幻灯片效果代码实例
May 21 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函数指定默认值方法的小例子
2013/12/04 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
jquery操作select大全
2014/04/25 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python sys.argv用法实例
2015/05/28 Python
详解Python中的文件操作
2016/08/28 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python调用接口的4种方式代码实例
2019/11/19 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android