帶有JS的HTML複選框

Question

<input type="checkbox" name="smoker"> 

如何在不更改上述HTML代碼的情況下讓JavaScript識別該框是選中還是取消選中。

Answer 1

使用querySelectorAll()獲取所有input元素。然後循環瀏覽所有input以查找具有特定名稱的input。然後只需檢查輸入的checked屬性。請嘗試以下操作：

var val = document.querySelectorAll("input"); 
 
val.forEach(function(item){ 
 
    if(item.name == 'smoker'){ 
 
    console.log(item.checked) 
 
    } 
 
});

<input type="checkbox" name="smoker">

Answer 2

使用querySelector和名稱

let val = document.querySelector('[name="smoker"]').checked; 
console.log(val);