<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>onchange</title>
</head>
<script type="text/javascript">
window.function() {
var aFruit=document.getElementsByName("checkfruit");
var oSelectAll=document.getElementById("selectAll");
var oP=document.getElementById("content");
var str="";
//全选/全不选
oSelectAll.onchange=function() {
if(this.checked) {
for(var i=0;i<aFruit.length;i++) {
aFruit[i].checked=true;
str+=aFruit[i].value+" ";
}
oP.innerText="你选择的瓜是:"+str;
}else {
for(var i=0;i<aFruit.length;i++) {
aFruit[i].checked=false;
}
oP.innerText="你没有选择任何瓜";
str="";
}
}
//单个点击复选框
var str1="";
for(var i=0;i<aFruit.length;i++) {
aFruit[i].onchange=function() {
if(this.checked) {
str1=str1+this.value+" ";
}else {
str1=str1.replace(this.value,"");
}
oP.innerText="你选择的瓜是:"+str1;
}
}
}
</script>
<body>
<div>
<label><input type="checkbox" id="selectAll"/>全选/全不选:</label><br /><br />
<label><input type="checkbox" name="checkfruit" value="冬瓜"/>冬瓜</label>
<label><input type="checkbox" name="checkfruit" value="南瓜"/>南瓜</label>
<label><input type="checkbox" name="checkfruit" value="西瓜"/>西瓜</label>
<label><input type="checkbox" name="checkfruit" value="北瓜"/>北瓜</label>
</div>
<p id="content"></p>
</body>
</html>
效果图:
代码中用了今天看到的onchange事件,onchange事件常用于“具有多个选项的表单元素”中。
- 单选框选择某一项时触发
- 复选框选择某一项时触发
- 下拉列表选择某一项时触发
在代码中用onclick点击事件也是可以的,出来的效果是一样的!!!
只不过,onchange与onclick还是有点区别的:
onclick事件:点击控件时触发的事件
onchange事件:控件内容发生改变时触发的事件(对象有了变化才触发事件)
下面我写了一个例子对两个事件做了比较:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>onchange</title>
</head>
<script type="text/javascript">
window.function() {
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
oBtn1.onclick=function() {
alert("onlick事件");
}
oBtn1.onchange=function() {
alert("onchange事件");
}
}
</script>
<body>
<input type="button" id="btn1" value="onclick"/>
<input type="button" id="btn2" value="onchange"/>
</body>
</html>
运行图:
这就是onclick与onchange的区别,在这个例子中点击onchange按钮并没有弹窗弹出,就是因为控件内容并没有发生变化。
最后,给你们碗鸡汤:
我不是想赢,我只是不想输