復選框onchange事件未觸發
[英]Checkbox onchange event not firing
問題描述
我有以下設置：2個復選框，當選中第一個時，它會切換第二個的狀態。 第二個具有onchange偵聽器，該偵聽器應該在更改時觸發警報。
問題是，當我單擊它時，onchange會被很好地激發，但是當我使用第一個改變它的狀態時，就不會激發該事件。
我想念什么嗎？ 還是onchange事件基本上意味着要像onclick一樣？
<!DOCTYPE html>
<html>
<body>
<form action="">
<input id='one' type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input id='two' type="checkbox" name="vehicle" value="Car" checked>I have a car
</form>
<script>
function show(){
alert(document.getElementById('two').checked);
}
document.getElementById('one').addEventListener('click', function(){
var two = document.getElementById('two');
two.checked = ! two.checked;
});
document.getElementById('two').addEventListener('change', function(){
alert("changed");
});
</script>
</body>
</html>
感謝您的幫助:)
2 個解決方案
解決方案1
4 已采納 2015-05-27 16:33:44
您正在更改不會觸發事件的屬性，可以觸發更改事件，也可以單擊第二個復選框。
嘗試更改：
document.getElementById('one').addEventListener('click', function(){
var two = document.getElementById('two');
two.checked = ! two.checked;
});
至：
document.getElementById('one').addEventListener('click', function(){
document.getElementById('two').click()
});
另一個解決方案是觸發更改事件：
document.getElementById('one').addEventListener('click', function(){
var two = document.getElementById('two');
two.checked = ! two.checked;
two.dispatchEvent('change');
});
解決方案2
0 2015-05-27 16:35:02
如果目標是只選中一個復選框，那么這是一個jQuery解決方案：
$(document).ready(function () {
$('#one, #two').change(function (e) {
if ($(this).prop('checked')) {
$('#one, #two').not(this).prop('checked', false)
}
});
});
ReactJS - Checkbox onChange事件未觸發
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.