jQuery对表单的操作

最新推荐文章于 2025-06-22 10:01:18 发布

原创最新推荐文章于 2025-06-22 10:01:18 发布 · 295 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用jQuery操作HTML表单元素的实例，包括文本域大小调整、复选框操作、下拉选择框操作及表单验证等。通过具体代码展示了如何实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery对表单的操作</title>
<script src="../websites/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<form action="#" method="post" id="demo">
  <fieldset>
    <legend>个人基本信息</legend>
    <div>
      <label for="uid">名称：</label>
      <input type="text" id="uid" name="uid" required>
    </div>
    <div>
      <label for="pwd">密码：</label>
      <input type="password" id="pwd" name="pwd">
    </div>
    <button>提交</button>
    <div>
      <label for="msg">详细信息：</label>
      <div id="btn">
        <span class="larger">放大</span>
        <span class='smaller'>缩小</span>
      </div>
      <textarea id="msg" cols="30" rows="10"></textarea>
    </div>
  </fieldset>
</form>
<form action="">
  <p>你爱好的运动是？</p>
  <input type="checkbox" name="items" value="足球" class="a">足球
  <input type="checkbox" name="items" value="篮球" class="a">篮球
  <input type="checkbox" name="items" value="羽毛球" class="a">羽毛球
  <input type="checkbox" name="items" value="乒乓球" class="a">乒乓球<br>
  <input type="button" id="CheckAll" value="全选">
  <input type="button" id="CheckNo" value="全不选">
  <input type="button" id="CheckRev" value="反选">
  <input type="button" id="send" value="提交">
</form>
<div class="content">
  <select multiple id="select1" style="height:150px; width:55px">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
    <option value="5">选项5</option>
    <option value="6">选项6</option>
    <option value="7">选项7</option>
  </select>
  <div>
    <span id="add">选中添加到右边>></span>
    <span id="add_all">全部添加到右边>></span>
  </div>
</div>
<div class="content">
  <select multiple id="select2" style="height:150px; width:55px">
  </select>
  <span id="remove"><<选中删除到左边</span>
  <span id="remove_all"><<全部删除到左边</span>
</div>
</body>
</html>
<script>
$(function(){
	    //文本域大小控制
	   var $msg = $('#msg');
       $('.larger').click(function(){
		   if(!$msg.is(':animated'))
		   {
			   if($msg.height()<500)
			   {
				   $msg.animate({
					     'height':'+=50px'
					   },400)
			   }
			}
		   })
	 $('.smaller').click(function(){
		   if(!$msg.is(':animated'))
		   {
			   if($msg.height()>50)
			   {
				   $msg.animate({
					     'height':'-=50px'
					   },400)
			   }
			}
		   })
		//Page 158
		//复选框操作 
		//全选
		$('#CheckAll').click(function(){
			var $box = $('.a');
			if(!$box.is(':checked'))
			{
				$box.prop('checked',true)
			}
			else
			{
				$box.prop('checked',true)
			}
			})
		//取消全选 
		$('#CheckNo').click(function(){
			var $box = $('.a');
			if(!$box.is(':checked'))
			{
				$box.prop('checked',false)
			}
			else
			{
				$box.prop('checked',false)
			}
			})
		//反选
		//1.
	/*	$('#CheckRev').click(function(){
			var $box = $('.a');
			$box.each(function() {
                $(this).prop('checked',!$(this).prop('checked'))
            });
			})*/
		//2.	
		$('#CheckRev').click(function(){
			var $box = $('.a');
			$box.each(function() {
               this.checked=!this.checked;
            });
			})
		//select操作
		$('#add').click(function(){
			var $children1 = $('#select1 option:selected');
			$children1.appendTo($('#select2')); 
			})
		$('#add_all').click(function(){
			var $children1 = $('#select1 option').prop('selected',true);
			$children1.appendTo($('#select2'));
			})
		$('#remove').click(function(){
			var $children2 = $('#select2 option:selected')
			$children2.appendTo($('#select1'));
			})
		$('#remove_all').click(function(){
			var $children2 = $('#select2 option').prop('selected',true);
			$children2.appendTo($('#select1'));
			})
		//表单验证
		$('#demo input').each(function(){
			var $star = $('<strong>*</strong>');
			$(this).parent().append($star);
			})
		//用户名验证
		$('#uid').on('input propetychange',function(){
			var $parent = $(this).parent();
			
			if($(this).val()==''||$(this).val().length<6)
				{
					var errorMsg = '请输入至少六位的用户名';
					$parent.append('<span id="error"></span>');
					$('#error').html(errorMsg);
				}
			else
				{
					var okMsg = '输入正确';
					$('#error').html(okMsg);
				}
			})
		//提交前的验证
		$('#demo button').click(function(){
				var Error_text = $('#error').text();
				//alert(Error_text);
				if(Error_text=='输入正确')
					{
						alert('注册成功，请直接登录');
					}
				else
					{
						return false;
					}				
			})
	})
</script>