JQuery操作表单元素大云集 _Web前端

JQuery操作表单元素大荟萃
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>JQuery操作表单大荟萃</title>
<script src="jquery.js" type="text/javascript"></script>
<script language="javascript"> 
$(document).ready(function(){
	//得到输入框值
	$("#inputButton1").click(function(){
		alert($("#input1").val());
	});
	//选中输入框值
	$("#inputButton2").click(function(){
		$("#input1").select();
	});
	//输入框禁用-启用
	$("#inputButton3").click(function(){
		if($(this).html()=='禁用'){
			$("#input1").attr('disabled',true);
			$(this).html('启用');
		}else {
			$("#input1").attr('disabled',false);
			$(this).html('禁用');
		}
	});
	//输入框只读
	$("#inputButton4").click(function(){
		if($(this).html()=='只读'){
			$("#input1").attr('readonly',true);
			$(this).html('非只读');
		}else {
			$("#input1").attr('readonly',false);
			$(this).html('只读');
		}
	});
	//多选框取值
	$("#boxButton1").click(function(){
		$("input[type=checkbox][name=box]:checked").each(function(i,obj){
			alert(obj.value);
		});
	});
	//选中：中国
	$("#boxButton2").click(function(){
		$("input[type=checkbox][name=box][value=中国]").attr('checked',true);
	});
	//清空多选框
	$("#boxButton3").click(function(){
		if($(this).html()=='全选'){
			$("input[type=checkbox][name=box]").attr('checked',true);
			$(this).html('全不选');
		}else {
			$("input[type=checkbox][name=box]:checked").removeAttr("checked"); 
			$(this).html('全选');
		}
	});
	//多选框反选
	$("#boxButton4").click(function(){
		$("input[type=checkbox][name=box]").each(function(i,obj){
			$(this).attr('checked',!$(this).attr('checked')==true);
		});
	});
	
	//单选框取值
	$("#radioButton1").click(function(){
		$("input[type=radio][name=sex]:checked").each(function(i,obj){
			alert(obj.value);
		});
	});
	//选中：男
	$("#radioButton2").click(function(){
		$("input[type=radio][name=sex][value=男]").attr('checked',true);
	});
	
	//下拉框取值
	$("#selectButton1").click(function(){
		alert($("#sel").val());
	});
	//选中：ih99.com
	$("#selectButton2").click(function(){
		$("#sel").val('ih99.com');
	});
	
	//多选下拉框取值
	$("#smButton1").click(function(){
		alert($("#selMultiple").val());
	});
	//多选下拉框选中：ih99.com
	$("#smButton2").click(function(){
		$("#selMultiple").val('ih99.com');
	});
	//多选下拉框全选
	$("#smButton3").click(function(){
		if($(this).html()=='全选'){
			$("#selMultiple option").attr('selected',true);
			$(this).html('全不选');
		}else {
			$("#selMultiple option").removeAttr("selected"); 
			$(this).html('全选');
		}
	});
	//多选框反选
	$("#smButton4").click(function(){
		$("#selMultiple option").each(function(i,obj){
			$(this).attr('selected',!$(this).attr('selected')==true);
		});
	});
	//清空下拉框
	$("#smButton5").click(function(){
		$("#selMultiple").empty();
	});
	//添加下拉框
	$("#smButton6").click(function(){
		$("<option value='xgz'>许国柱</option>").appendTo("#selMultiple");
		
	});
	//删除下拉框
	$("#smButton7").click(function(){
		$("#selMultiple option:selected").each(function(i,obj){
			$(this).remove();
		});
		
		
	});
	
});
</script>
<style type="text/css">
<!--
.opTable {BORDER-RIGHT: #183789 1px solid; BORDER-TOP: #183789 1px solid; BORDER-LEFT: #183789 1px solid; BORDER-BOTTOM: #183789 1px solid; BACKGROUND-COLOR: #FFFFFF}

.opTable TR TH{
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; BACKGROUND: #F1F3F5; PADDING-BOTTOM: 3px; background-color:#0099FF; PADDING-TOP: 3px;font-size:14px;
}

.opTable TR TD{
	PADDING-RIGHT: 3px; PADDING-LEFT: 3px; BACKGROUND: #F1F3F5; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}


-->
</style>
</head>

<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" class="opTable">
  <tr>
    <th colspan="3">JQuery操作表单大荟萃</th>
  </tr>
  <tr>
    <td>输入框</td>
	<td width='300px'><input type="text" value="ih99.com" id="input1" /></td>
	<td><button id="inputButton1">取值</button>
	<button id="inputButton2">选中</button>
	<button id="inputButton3">禁用</button>
	<button id="inputButton4">只读</button>
	</td>
  </tr>
  <tr>
    <td>复选框</td>
	<td>
	  <input type="checkbox" name="box" value="中国" id="1" />
	  <label for="1">中国</label>
	  <input type="checkbox" name="box" value="国外" id="2" />
	  <label for="2">国外</label> 
	  </td>
	  <td>
	  <button id="boxButton1">取值</button>
	  <button id="boxButton2">选中:中国</button>
	  <button id="boxButton3">全选</button>
	  <button id="boxButton4">反选</button>
	  </td>
  </tr>
  <tr>
    <td>单选框</td>
	<td>
	<input type="radio" name="sex" value="男" id="3"/><label for="3">男</label>
	<input name="sex" type="radio" id="4" value="女"/><label for="4">女</label>
	</td>
	 <td>
	 <button id="radioButton1">取值</button>
	 <button id="radioButton2">选中:男</button>
	 </td>
  </tr>
   <tr>
    <td>下拉框(单选)</td>
	<td>
	  <select name="select" id="sel">
	    <option value="白沟易寻网">白沟易寻网</option>
	    <option value="www.ih99.com">www.ih99.com</option>
	    <option value="ih99.com">ih99.com</option>
      </select>
	
	</td>
	<td>
	<button id="selectButton1">取值</button>
	<button id="selectButton2">选中:ih99.com</button>
	</td>
  </tr>
  <tr>
    <td>下拉框(多选)</td>
	<td>
	  <select name="selectMultiple" size="5" multiple="multiple" id="selMultiple">
	    <option value="白沟易寻网">白沟易寻网</option>
	    <option value="www.ih99.com">www.ih99.com</option>
	    <option value="ih99.com">ih99.com</option>
      </select>
	
	</td>
	<td>
	  <button id="smButton1">取值</button>
	  <button id="smButton2">选中:ih99.com</button>
	  <button id="smButton3">全选</button>
	  <button id="smButton4">反选</button>
	  <button id="smButton5">清空</button>
	  <button id="smButton6">添加</button>
	  <button id="smButton7">删除</button>
	</td>
  </tr>
</table>
<p>请自备jQuery文件，放在本文件同目录下即可！</p>
转载时请指明出处！谢谢！
</body>
</html>