我的頁面上有多個復選框元素，每當有人單擊它們時，它們的顏色和文本都會發生變化，我可以使用 CSS 來做到這一點，但我也想更改復選框按鈕中的圖示，所以我使用 javascript在我的 HTML 代碼中，但是當我運行腳本時，它僅適用于一個元素，僅適用于第一個元素，因此這意味著圖示僅適用于第一個復選框按鈕，但不適用于所有其他按鈕，我試圖給出所有我的復選框按鈕唯一 ID，但我仍然有同樣的問題
這是未選中時的復選框 1 和 2
這是選中時的復選框 1 和 2
這是我運行的腳本：
Ps：我將此腳本用于所有其他復選框按鈕，我已經嘗試更改按鈕的 ID 以匹配 HTML 和腳本 ID，但仍然只適用于第一個。
document.getElementById ('checkbox').addEventListener ('click', function (ev) {
document.getElementById('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-circle-check');
}, false);請提供任何幫助。
uj5u.com熱心網友回復：
document.getElementById ('checkbox').addEventListener ('click', function (ev) {
document.getElementsByClassName('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-circle-check');
}, false);getElementsByClassName('icon') 將選擇具有該值的所有類。
uj5u.com熱心網友回復：
document.getElementById只會回傳具有指定 id 的第一個元素，因此為多個元素提供相同的 id 將無濟于事。我建議檢查document.getElementsByClassName提供相同類的復選框。
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
uj5u.com熱心網友回復：
不要在多個元素上使用相同的 ID 。它只會回傳它找到的第一個。您應該使用該類設定多個專案。然后你就可以做到了。
document.getElementByClassName('YourClassNameHere)
要么
document.querySelectorAll('.YourClassNameHere')*** 注意....您將需要.確定一個類。#將確定一個ID。
uj5u.com熱心網友回復：
您可以使用它，但此方法回傳一個節點串列，因此您必須使用回圈將事件偵聽器添加到每個復選框：
//if you're using class selector
document.querySelectorAll('.checkbox');
//if you're using id selector
document.querySelectorAll('#checkbox')
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/445083.html
標籤：javascript html jQuery css 复选框
上一篇：基于子元素垂直居中父div