選中復選框時如何保留輸入值 Javascript？

Question

我們如何保留選中相應復選框的輸入框的值，如果未選中相應的復選框，則從form中清除輸入值？

<form onsubmit="finalSubmission">

<input type="checkbox" id="yourBox1" />
<input type="text" id="yourText1" />
<br>
<hr>

<input type="checkbox" id="yourBox2" />
<input type="text" id="yourText2" />
<br>
<hr>

<input type="checkbox" id="yourBox3" />
<input type="text" id="yourText3" />
<br>
<hr>
<input type="checkbox" id="yourBox4" />
<input type="text" id="yourText4" />
<br>
<hr>
<button type="submit">Submit</button>

</form>

我知道我可以這樣做，但是還有其他替代方法嗎？ 這是一個相當長的方法

function finalSubmission(event){
event.preventDefault();
let firstInputField;
let checkBox1 = document.getElementById("yourBox1");
    if (checkBox1.checked == true){
        firstInputField = true
    } else {
        firstInputField = false
    }
if(!firstInputField){
  document.getElementById('yourText').value = "";
}
}

Answer 1

試試這個 -

 function finalSubmission() { for (var i = 0; i < 4; i++) {.document.getElementById("yourBox" + i)?checked. document.getElementById("yourText" + i):value = ""; null; } }

 <input type="checkbox" id="yourBox1" /> <input type="text" id="yourText1" /> <br> <hr> <input type="checkbox" id="yourBox2" /> <input type="text" id="yourText2" /> <br> <hr> <input type="checkbox" id="yourBox3" /> <input type="text" id="yourText3" /> <br> <hr> <input type="checkbox" id="yourBox4" /> <input type="text" id="yourText4" /> <br> <hr> <button type="submit" onclick="finalSubmission">Submit</button>