[英]Any way of triggering a event in Javascript when Html checkbox gets unchecked?
一個非常基本的問題,但找不到任何可行的解決方案。 我有這個事件監聽器:
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() function 因為當我嘗試時它根本不起作用
嘗試用下一種方式實現:
var IdOfLayers = [];
var checkboxes = document.querySelectorAll("input[type='checkbox']");
Array.from(checkboxes).map(function(checkbox){
checkbox.addEventListener('change', function(e) {
var name = e.target.name;
if(e.target.checked) {
IdOfLayers.push(e.target.name);
} else {
var idx = IdOfLayers.indexOf(name);
if(idx !== -1) {
IdOfLayers.splice(idx, 1);
}
}
console.log(IdOfLayers);
});
});
請參閱我對您的問題的評論。 我相信,這就是您所需要的(運行下面的代碼片段):
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.