JavaScriptを使用してプログラムでチェックボックスを変更したときにイベントをトリガーする

Question

JavaScriptが純粋なjavascriptを使用してチェックボックスが変更されたことを知る必要があります。

私はセットアップ別のJS関数は、次のようなコードを使用して、それを変更した場合、ユーザーがチェックボックスを変更しますが、これは動作しない場合正常に実行「のonchange」イベントがあります。

document.getElementById('mycheckbox').checked = true; 

することが可能ですJSがチェックボックスをオンまたはオフにすると、純粋なJavaScriptを使用してイベントを発生させますか？

Answer 1

あなたはdocument.createEvent/initEvent方法でchangeイベントを作成し、指定checkbox要素からイベントを送出するためにdispatchEvent methodを使用することができます。

var event = document.createEvent("HTMLEvents"); 
event.initEvent('change', false, true); 
checkbox.dispatchEvent(event); 

この

は、あなたがプログラム的要素の checkedプロパティを変更し、それによって、イベントリスナを起動します changeイベントをトリガすることができます。しかし、それはあまりブラウザのサポートを持っている、

var checkbox = document.querySelector('[type="checkbox"]'); 
 
var button = document.querySelector('button'); 
 

 
// Event Listener: 
 
checkbox.addEventListener('change', function(event) { 
 
    alert(event.target.checked); 
 
}); 
 

 
// Programmatically change the `checked` property:' 
 
button.addEventListener('click', function() { 
 
    checkbox.checked = !checkbox.checked; 
 
    triggerEvent(checkbox, 'change'); 
 
}); 
 

 
function triggerEvent(element, eventName) { 
 
    var event = document.createEvent("HTMLEvents"); 
 
    event.initEvent(eventName, false, true); 
 
    element.dispatchEvent(event); 
 
}

<input type="checkbox" /> 
 
<button>Programmatically trigger 'change' event</button>

は別の方法として、あなたも Event() constructorを使用することができます。

は、ここで基本的な例です。ここで

var event = new Event('change'); 
checkbox.dispatchEvent(event); 

は一例です：

var checkbox = document.querySelector('[type="checkbox"]'); 
 
var button = document.querySelector('button'); 
 

 
// Event Listener: 
 
checkbox.addEventListener('change', function(event) { 
 
    alert(event.target.checked); 
 
}); 
 

 
// Programmatically change the `checked` property:' 
 
button.addEventListener('click', function() { 
 
    checkbox.checked = !checkbox.checked; 
 
    triggerEvent(checkbox, 'change'); 
 
}); 
 

 
function triggerEvent (element, eventName) { 
 
    var event = new Event(eventName); 
 
    element.dispatchEvent(event); 
 
}

<input type="checkbox" /> 
 
<button>Programmatically trigger 'change' event</button>

Answer 2

あなたは$(document).ready equivalent without jQuery

、DOMの準備ができていることを確認するwindow.onloadの内側に配置することをお勧めします

var checkbox = document.getElementById("test-check"); 
 
checkbox.addEventListener("change", checked, false); 
 

 
function checked(e) { 
 
    console.log(e.target.checked) 
 
}

<span> 
 
    <input type="checkbox" id="test-check"> 
 
Test 
 
</span>

また、あなたが変更イベント

Documentation

にいくつかの選択肢を持っています