简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:52:451071browse

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>

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

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：nodejs实现获取当前url地址及url各种参数值_node.jsNext article：使用javascript提交form表单方法汇总_javascript技巧

Related articles

See more