jQueryはボタンクリック、全選択/逆選択、ラジオボタン/チェックボックス、テキストボックス、フォーム検証を実装します。-jsチュートリアル-php.cn

jQueryはボタンクリック、全選択/逆選択、ラジオボタン/チェックボックス、テキストボックス、フォーム検証を実装します。

高洛峰

リリース： 2017-02-06 13:11:34

オリジナル

1176 人が閲覧しました

jQuery は、クリックして選択/逆選択のラジオボタン/チェックボックステキストボックスのフォーム検証を実装します

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<!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>