获取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>
js中可以直接通过获取元素,然后点属性即可,但是需要确认一下属性对应的值是什么,比如checked的值就是true或false