`
cxy020
  • 浏览: 63628 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html介绍(2)

 
阅读更多 
<html>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<title>HTML标签</title>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
	<!-- 一组单选框 -->
	<label for="A">A</label><input id="A" name="letter1" value="1" type="radio" />
	<label for="B">B</label><input id="B" name="letter1" value="2" type="radio" />
	<label for="C">C</label><input id="C" name="letter1" value="3" type="radio" />
	<br />
	<input id="mybtn" type="button" value="click" /><br />

	<!-- 一组复选框 -->
	<label for="CA">A</label><input id="CA" name="letter2" value="1" type="checkbox" />
	<label for="CB">B</label><input id="CB" name="letter2" value="2" type="checkbox" />
	<label for="CC">C</label><input id="CC" name="letter2" value="3" type="checkbox" />
	<br />
	<input id="mybtn2" type="button" value="click" /><br />
</body>
</html>

<script type="text/javascript">
	//兼容ie浏览器测试
	var console = console || {};
	console.log = console.log || function(a){
		alert(a);
	}

	/*
	单选框/复选框也是比较常用的控件,主要用来让用户N选1或者N选N.
	*/

	var btn = document.getElementById("mybtn");
	btn.onclick = function(){
		//通过name获取单选框dom
		var radio = document.getElementsByName("letter1");
		for(var i = 0,len = radio.length; i < len; i++){
			var ele = radio[i];
			//判断是否选中,返回true/false
			var b = ele.checked;
			if(b){
				//选中了...
				console.log("选中了:" + ele.id + ",value:" + ele.value);
			}
		}
	}

	//复选框选择
	var btn2 = document.getElementById("mybtn2");
	btn2.onclick = function(){
		//通过name获取复选框dom
		var radio = document.getElementsByName("letter2");
		for(var i = 0,len = radio.length; i < len; i++){
			var ele = radio[i];
			//判断是否选中,返回true/false
			var b = ele.checked;
			if(b){
				//选中了...
				console.log("选中了:" + ele.id + ",value:" + ele.value);
			}
		}
	}

	/*
	使用jquery获取单选框选中的值
	*/
	$("#mybtn").click(function(){
		//获取单选框选中的dom
		//分析一下就是,input标签里面name=letter1,并且选中的对象
		var radio = $("input[name='letter1']:checked");
		var id = radio.attr("id");
		var val = radio.val();
		console.log("选中了:" + id +",value:" + val);
	});
	/*
	使用jquery获取复选框选中的值
	*/
	$("#mybtn2").click(function(){
		//获取复选框选中的dom
		//分析一下就是,input标签里面name=letter2,并且选中的对象
		var radio = $("input[name='letter2']:checked");
		radio.each(function(i,ele){
			//注意这个ele是dom对象,并不是jquery对象.如果要转成jquery对象$(ele)就好.
			var id = ele.id;
			var val = ele.value;
			console.log("选中了:" + id +",value:" + val);
		});
	});

	/*
	知识点:
	1.要把多个单选框/复选框组成一组,只需要指定相同的name就好.
	2.判断单选框/复选框是否选中,直接判断dom的checked属性就好.
	3.介绍了使用jquery选择器直接获取到单选框/复选框选中的dom.
	*/
</script>

 

分享到：
| html介绍(1)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics