您的位置：首页 > Web前端 > JQuery

Jquery操作各种表单元素 select checkbox radio

2011-05-24 11:24 771 查看 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>testJquery.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">-->
    <mce:script type="text/javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script>
	<mce:script type="text/javascript"><!--
		$(document).ready(function() {
			$("#selAll").click(function() {
				if($(this).attr("checked")) {
					$("input[name='chk']").each(function() {
						$(this).attr("checked", true);
					});
				} else {
					$("input[name='chk']").each(function() {
						$(this).attr("checked", false);
					});
				}
			});
		});
		function sel(id) {
			$("#sel").attr("value", id);
		}
		function clear() {
			$("#sel").get(0).options.length = 0;
		}
		function add() {
			var append = "<option>123</option>"
			//追加
			$("#sel").append(append);
			//最前面插入
			//$("#sel").prepend(append);
		}
		function remove() {
			$("#sel").find("option[value=2]").remove();
		}
		function getSelIndex() {
			alert($("#sel").get(0).selectedIndex);
		}
		function setSelIndex(index) {
			
		}
		function getLength() {
			alert($("#sel").find("option").length);
		}
		function getText() {
			//或者alert($("#sel").find("option:selected").html());
			alert($("#sel").find("option:selected").text());
		}
		function setText(text) {
			$("#sel").find("option[text='"+text+"']").attr("selected", true);
		}
		function setCheck(id) {
			$("input[name='chk'][value="+id+"]").attr("checked", true);
			
		}
		function getCheck() {
			var chk = "";
			var len = $("input[name='chk']").length;
			$("input[name='chk']").each(function(n) {
				if($(this).attr("checked")) {
					var doc = "";
					if(n != len -1) {
						doc = ",";
					}
					chk =  chk + $(this).val() + doc;
				} 
			});
			alert(chk);
		}
		function getRadio() {
			alert($("input[name='rad']:checked").val());
		}
		function setRadio(id) {
			$("input[type='radio'][value="+id+"]").attr("checked", true);
		}
	
// --></mce:script>
  </head>
  
  <body>
    <form name="form1">
    	<select name="sel" id="sel">
    		<option value="1">1</option>
    		<option value="2">2</option>
    		<option value="3">3</option>
    	</select>
    	<a href="javascript:sel(2)" mce_href="javascript:sel(2)">选择2</a>
    	<a href="javascript:clear()" mce_href="javascript:clear()">清空</a>
    	<a href="javascript:add()" mce_href="javascript:add()">添加一项</a>
    	<a href="javascript:remove(2)" mce_href="javascript:remove(2)">删除value为2的项</a>
    	<a href="javascript:getLength()" mce_href="javascript:getLength()">获取长度</a>
    	<a href="javascript:getSelIndex()" mce_href="javascript:getSelIndex()">获取选择项的索引值</a>
    	<a href="javascript:getText()" mce_href="javascript:getText()">获取Select选择的Text</a>
    	<a href="javascript:setText(2)" mce_href="javascript:setText(2)">设置text为2的为选中项</a>
    	<br/>
    	<input name="chk" value="1" type="checkbox"/><input name="chk" value="2" type="checkbox"/><input name="chk" value="3" type="checkbox"/>
    	全选<input id="selAll" type="checkbox"/>
    	<a href="javascript:setCheck(2)" mce_href="javascript:setCheck(2)">设置value为2的项为选中</a>
    	<a href="javascript:getCheck()" mce_href="javascript:getCheck()">获取所有选中项的值</a>
    	<br/>
    	<input name="rad" value="1" type="radio"/><input name="rad" value="2" type="radio"/><input name="rad" value="3" type="radio"/>
    	<a href="javascript:setRadio(2)" mce_href="javascript:setRadio(2)">设置value为2的项为选中</a>
    	<a href="javascript:getRadio()" mce_href="javascript:getRadio()">获取选中项的值</a>
    	<br/>
    </form>
  </body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航