我怎樣才能使我選擇的表格在表格中表現突出？

Question

我在標簽中創建了兩個問題。 我想通過更改背景顏色來突出顯示我選擇的答案。 但是，我可以這樣做，因為當我在第一個問題中選擇答案，然后選擇下一個問題時，前一個問題中的突出顯示消失了。 那么現在，我該怎么做，以及如何通過單擊答案框中的任意位置而不是單擊 label 或單選框來選擇我的答案。

 function openPresent(event) { const answer = document.querySelectorAll('.option'); for (let i = 0; i < answer.length; i++) { answer[i].style.backgroundColor = originalAnswerArray[i]; } event.target.style.backgroundColor = 'blue'; } const answer = document.querySelectorAll('.option'); let i; let originalAnswerArray = []; for (i = 0; i < answer.length; i++) { originalAnswerArray.push(answer[i].getAttribute('value')); answer[i].addEventListener('click', openPresent); }

 .option { border-top: 1px solid white; border-bottom: 1px solid white; display: flex; justify-content: flex-start; align-items: center; flex-direction: row; width: auto; padding: 15px; background-color: #f1f1f1; }.option:hover { background-color: #ddd; } label { margin-left: 15px; }

 <form> <div class='option'> <input type='radio' id='option1' name="question1" value="option 1"> <label for='option1'> option 1 </label><br> </div> <div class='option'> <input type='radio' id='option2' name="question1" value="option 2"> <label for='option2'>option 2</label><br> </div> <div class='option'> <input type='radio' id='option3' name="question1" value="option 3"> <label for='option3'>option 3</label><br> </div> <div class='option'> <input type='radio' id='option4' name="question1" value="option 4"> <label for='option4'>option 4</label><br> </div> </form> <p><strong> Question 2 of 10</strong></p> <p>Question 2</p> <form> <div class='option'> <input type='radio' id='option1' name="question2" value="option 1"> <label for='option1'> <div>option 1 </div> </label><br> </div> <div class='option'> <input type='radio' id='option2' name="question2" value="option 2"> <label for='option2'>option 2</label><br> </div> <div class='option'> <input type='radio' id='option3' name="question2" value="option 3"> <label for='option3'>option 3</label><br> </div> <div class='option'> <input type='radio' id='option4' name="question2" value="option 4"> <label for='option4'>option 4</label><br> </div> </form>

Answer 1

帶有屬性事件的 function openPresent ，將在控制台日志中產生指針事件。 您可以使用target ( event.target ) 的 object 來搜索您的輸入元素。 您可以使用querySelector 。 之后，您可以將 checked 更改為 true 以選中此無線電輸入。 您可以使用此代碼：

function openPresent(event) {
  const answer = document.querySelectorAll(".option");
  for (let i = 0; i < answer.length; i++) {
    answer[i].style.backgroundColor = originalAnswerArray[i];
  }

  const input = event.target.querySelector('input')
  input.checked = true

  event.target.style.backgroundColor = "blue";
}

const answer = document.querySelectorAll(".option");
let i;

let originalAnswerArray = [];
for (i = 0; i < answer.length; i++) {
  originalAnswerArray.push(answer[i].getAttribute("value"));
  answer[i].addEventListener("click", openPresent);
}