jQuery implémente le clic sur le bouton, tout sélectionner/sélection inverse, le bouton radio/case à cocher, la zone de texte, la validation du formulaire-js tutoriel-php.cn

jQuery implémente le clic sur le bouton, tout sélectionner/sélection inverse, le bouton radio/case à cocher, la zone de texte, la validation du formulaire

高洛峰

Libérer： 2017-02-06 13:11:34

original

1085 Les gens l'ont consulté

jQuery implémente la validation du formulaire de bouton radio/case à cocher par clic/sélection inversée

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">
    
  <title>My JSP &#39;index.jsp&#39; 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($(&#39;input[name="radiobuttid=on"]:checked&#39;).val());
     });
     $("#uradio2").click(function(){
     alert($(&#39;input[name="radiobutton"]:checked&#39;).val());
     });
     $("#uradio3").click(function(){
     alert($(&#39;input[name="radiobutton"]:checked&#39;).val());
     });
       
     //复选框
     $("#ucheck").click(function(){
      var str="";//定义一个数组   
      $(&#39;input[name="checkbox"]:checked&#39;).each(function(){//遍历每一个名字为interest的复选框，其中选中的执行函数   
      str+=$(this).val();//将选中的值添加到数组chk_value中  
         
      });
      alert(str);
     });
     //全选
     $("#checkall").click(function(){ 
      $("input[name=&#39;items&#39;]").attr("checked",true); 
     }); 
       
     //全不选
     $("#checkallNo").click(function(){
      $("input[name=&#39;items&#39;]").attr("checked",false);
     });
      
     //反选
     $("#check_revsern").click(function(){ 
      $("input[name=&#39;items&#39;]").each(function(){ 
        $(this).attr("checked", !$(this).attr("checked")); 
       }); 
     }); 
       
     //全选/反选
     $("#checkItems").click(function(){ 
      $("input[name=&#39;items&#39;]").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>

Copier après la connexion

Il s'agit de la première version pour un débutant, veuillez indiquer s'il y a quelque chose qui ne va pas

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Pour plus d'implémentation jQuery des clics sur les boutons, sélectionnez tout/sélection inversée, bouton radio/case à cocher, zone de texte, articles liés à la validation de formulaire, veuillez faire attention au site Web PHP chinois !