多选框状态改变事件
对多选框元素来说，每一次点击结束，都会先触发oninput事件，再触发onchange事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<form action="./demo03.html">
爱好：
<label><input type="checkbox" name="age" value="pear" />梨子</label>
<label><input type="checkbox" name="age" value="apple" />苹果</label>
<label><input type="checkbox" name="age" value="banana" />香蕉</label>
</form>
<script>
var inputs = document.querySelectorAll("input");
var len = inputs.length;
for (var i = 0; i < len; i++) {
inputs[i].addEventListener("change", function(event) {
console.log("触发了", event.target, "的change事件");
console.log("该多选框的状态是", event.target.checked);
});
inputs[i].addEventListener("input", function(event) {
console.log("触发了", event.target, "的input事件");
console.log("该多选框的状态是", event.target.checked);
});
}
</script>
|
案例源码
