Jquery----简单的选择

最新推荐文章于 2024-08-31 09:41:33 发布

damys

最新推荐文章于 2024-08-31 09:41:33 发布

阅读量488

点赞数

分类专栏： JScript.Jquery 文章标签：选择

本文链接：https://blog.csdn.net/damys/article/details/43927559

版权

JScript.Jquery 专栏收录该内容

81 篇文章 0 订阅

订阅专栏

<body>
		<form method="post" action="">
		   	请选择您的爱好!
			<br><input type="checkbox" id="checkedAll_"/>全选/全不选
		   	<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" id="CheckedAll" value="全　选"/>
		    <input type="button" id="CheckedNo" value="全不选"/>
		    <input type="button" id="CheckedRev" value="反　选"/> 
		
			<input type="button" id="send" value="提　交"/> 
		</form>
	</body>
	
	<script language="JavaScript">
	  
		$("#checkedAll_").click(
		function (){
			if(this.checked){
				$("input[name='items']").attr("checked","checked");
			}else{
				$("input[name='items']").removeAttr("checked");
			}
		}
		);
		
		//全选
		$('#CheckedAll').click(function(){
			$("input[name='items']").attr("checked", "checked");
		}
		);
		
		//全不选
		$('#CheckedNo').click(function(){
			$("input[name='items']").attr("checked", "");
		}
		);
		
		//反选
		$('#CheckedRev').click(function(){
			$("input[name='items']").each(function(){
				if(this.checked){
					$(this).attr("checked","");
				}else{
					$(this).attr("checked","checked");
				}
			})
		}
		);
	</script>

<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="70">
    	<!--"multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
		<select name="first" size="10" multiple="multiple" class="td3" id="first">
		  <option value="AA1">AA1</option>
		  <option value="AA2">AA2</option>
		  <option value="AA3">AA3</option>
		  <option value="AA4">AA4</option>
		  <option value="AA5">AA5</option>
		  <option value="AA6">AA6</option>
		  <option value="AA7">AA7</option>
		  <option value="AA8">AA8</option>
		</select>    
	</td>
	
    <td width="69" valign="middle">
       <input name="add"  		id="add" 		type="button" class="button" value="-->" /> 
       <input name="add_all" 	id="add_all" 	type="button" class="button" value="==>" /> 
       <input name="remove"  	id="remove" 	type="button" class="button" value="<--" />
	   <input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
        </td>
    <td width="127" align="left">
	
	  <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="AA9">AA9</option>
      </select>
	</td>
  </tr>
</table>

<script type="text/javascript">
	$(document).ready(	
		function(){			
			$("#add").click(
			function(){
				$("#first option:selected").appendTo($("#second"));
			});
			
			$("#add_all").click(function(){			
				$("#first option").appendTo($("#second"));
			});
			
			
			$("#remove").click(
			function(){
				$("#second option:selected").appendTo($("#first"));
			});
			
			$("#remove_all").click(function(){			
				$("#second option").appendTo($("#first"));
			});
			
			
			//双击
			$("#first:option").dblclick(
			function (){
				$("#first option:selected").appendTo("#second");
			});
			
			$("#second").dblclick(
			function (){
				$("#second option:selected").appendTo("#first");
			});			
		}	
	);
</script>
</html>