HTMLチェックボックスがオフになったときにJavaScriptでイベントをトリガーする方法はありますか？

debugcn 投稿 Dev

自分：

かなり基本的な問題ですが、実行可能な解決策を見つけることができません。私はこのイベントリスナーを持っています：

div.addEventListener('change', function () {
    const checkBox = event.target
    const checked = checkBox.checked
    let checkBoxName = checkBox.name

    if (checked) {
        for(ii = 0; ii < IdOfLayers.length; ii++) {
            if(checkBoxName == IdOfLayers[ii]) {
                checkBoxName = 0
            }
        }
        IdOfLayers.push(checkBoxName)
    }
    else if (document.getElementById(checkBoxName).checked == false) {
        //remove id from array
        console.log("unchecked triggered")
        for (i = 0; i < IdOfLayers.length; i++) {
            if (checkBoxName == IdOfLayers[i]) {
                x = IdOfLayers.splice(i,1,0)

            }
        }
    }
    console.log(IdOfLayers)
    let result = IdOfLayers.filter(word => word.length > 0)
    IdOfLayers = result
} )

現在のところ、チェックボックスがオンになっているときはいつでもそれを検出し、オンになっているチェックボックスの配列に追加します。チェックボックスがすでにそこにある場合も、重複がないように「0」を追加します。

これまでに何を試みても、チェック解除部分をトリガーすることができません。さまざまな方法を試しました。これに対する簡単な解決策が見つからない場合は、遠慮なくお知らせください

編集：私のチェックボックスはユーザーが動的に作成するので、試したときに機能しなかったため、onclick = stateChanged（）関数を単純に含めることはできないと思います

ブーブー：

あなたの質問に対する私のコメントを見てください。これで十分です（以下のコードスニペットを実行してください）。

const divElement = document.querySelector('#d');
/*
  A Set is the most efficient structure for adding and removing checkboxes
  You can always convert this to an array if that is ultimately what you need somewhere else.
*/
const IdOfLayers = new Set();

divElement.addEventListener('change', function(event) {
  const checkbox = event.target;
  const name = checkbox.name;
  if (checkbox.checked) {
    IdOfLayers.add(name);
  }
  else {
    IdOfLayers.delete(name);
  }
   // for debugging purposes or to convert to an array if that is what you need in the end
  const myArr = Array.from(IdOfLayers);
  console.log(myArr);
});

<div id="d">
   <label>Checkbox 1 <input type="checkbox" name="c1" value="1"></label>
   <label>Checkbox 2 <input type="checkbox" name="c2" value="2"></label>
   <label>Checkbox 3 <input type="checkbox" name="c3" value="3"></label>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]