🧑‍🚒

チェックボックスやラジオボタンをJavaScriptでチェック状態にしてもonchangeは発火しないので自前で発火してやる必要がある

2022/10/21に公開

TL;DR

  • チェックボックスやラジオボタンをJavaScriptでチェック状態にするには checked プロパティを変更してやる
  • ただし、その場合該当要素(Element)にchangeイベント(onchange)が指定されていてもイベントが発火しないので、自前で発火してやる必要がある
  • サンプルコードは用意しないが、selectタグ&optionタグも同じな気がする

サンプルコード

<input type="radio" onchange="onChangeFunc()" id="radio_button">
<label for="radio_button">ラジオボタン</label>
<input type="checkbox" onchange="onChangeFunc()" id="check_box">
<label for="check_box">チェックボックス</label>

こういうのがある時、

function onChangeFunc() {
  console.log("発火!");
}

const radioButton = document.getElementById('radio_button');
radioButton.checked = true;

とかしても onChangeFunc() は発火しないので
こうしてやる必要がある

const radioButton = document.getElementById('radio_button');
radioButton.checked = true;
radioButton.dispatchEvent(new Event('change'));

参考リンク

Discussion