HTML-获取元素中的值

获取input框中的值的三种方式

<input type="text" name="demo1" id="demo2" value="你好">

上面是一个input框,其中数据值是“你好”,如果要获取其值有三种方式,其中两种是JS方式,一种是JQuery的方式

// 方式一:
document.all.demo1.value;	// 通过name获取
document.all.demo2.value;	// 通过id获取
// 方式一推荐通过id获取,因为name可能会有重复值,比如option标签或者input标签的radio类型等
// 方式二:
document.getElementById("demo2").value;
// 方式三:
$("#demo2").val();

document.all的含义:
1.这个是用来获取页面内所有元素的一个集合。例如:document.all(0)表示页面内第一个元素。
2.也可以用来判断当前浏览器是不是IE

if(document.all){  
	alert("this is IE!");  
}

判断checkbox框是否被选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>checkbox的案例</title>
		<script type="text/javascript">
			// 判断checkbox是否有选中
			function howManyChecked() {
				// 获取所有input框元素
				var input = document.getElementsByTagName("input");
				alert("获取到"+input.length+"个input框");
				// 循环获取到的input框元素,判断是否名字为book
				for (var i = 0; i < input.length; i++) {
					if (input[i].name == "book" && input[i].type=="checkbox") {
						if(input[i].checked==true) {
							alert("这是选中框:"+input[i].value);
						}
					} 
				}
			}
		</script>
	</head>
	<body>
		姓名:<input type="text" name="name" id="name" value="张三" /><br/>
		年龄:<input type="text" name="age" id="age" value="15" /><br/>
		读书:
		<input type="checkbox" name="book" value="语文" />语文
		<input type="checkbox" name="book" value="数学" />数学
		<input type="checkbox" name="book" value="英语" />英语
		<input type="button" name="button" id="button" 
			value="查看有几个checkbox被选中" onclick="howManyChecked()"/>
	</body>
</html>

HTML-获取元素中的值_第1张图片
js中可以直接通过获取元素,然后点属性即可,但是需要确认一下属性对应的值是什么,比如checked的值就是true或false

你可能感兴趣的:(HTML)