具有位於相同表單的兩個不同位置的相同無線電組輸入

Question

有沒有辦法在兩個不同的位置定位相同的無線電組輸入，如果它們改變其中一個，另一個也會自動改變？

對於兩個位置，我的意思是同一個提交表單上的兩個不同位置。

我編輯了帖子以更好地表達我的意思。 有兩組。 如果用戶單擊第一組上的 1，我希望在第二組上也檢查 1。

我的代碼：

 <p>First group</p> <label class="n_people radio-inline">1 <input type="radio" name="number_people" value="1"> <span class="checkmark"></span> </label> <label class="n_people radio-inline">2 <input type="radio" name="number_people" value="2"> <span class="checkmark"></span> </label> <label class="n_people radio-inline">3 <input type="radio" name="number_people" value="3"> <span class="checkmark"></span> </label> <label class="n_people radio-inline">4 <input type="radio" name="number_people" value="4" checked="checked"> <span class="checkmark"></span> </label> <br> <p>Second group</p> <label class="n_people radio-inline">1 <input type="radio" name="number_people_2" value="1"> <span class="checkmark"></span> </label> <label class="n_people radio-inline">2 <input type="radio" name="number_people_2" value="2"> <span class="checkmark"></span> </label> <label class="n_people radio-inline">3 <input type="radio" name="number_people_2" value="3"> <span class="checkmark"></span> </label> <label class="n_people radio-inline">4 <input type="radio" name="number_people_2" value="4" checked="checked"> <span class="checkmark"></span> </label>

Answer 1

您可以使用包裝器div將組分為兩組，並使用事件委托，您可以捕獲每個組上的change事件，並更改檢查另一組中相應的radio 。

 const groupOne = document.getElementById('group-one') const groupTwo = document.getElementById('group-two') const changeGroup = (groupA, groupB) => { groupA.addEventListener('change', (e) => { groupB.querySelector(`[value="${e.target.value}"]`).checked = true }) } changeGroup(groupOne, groupTwo) changeGroup(groupTwo, groupOne)

 <div id="group-one"> <p>First group</p> <label class="n_people radio-inline" >1 <input type="radio" name="number_people" value="1" /> <span class="checkmark"></span> </label> <label class="n_people radio-inline" >2 <input type="radio" name="number_people" value="2" /> <span class="checkmark"></span> </label> <label class="n_people radio-inline" >3 <input type="radio" name="number_people" value="3" /> <span class="checkmark"></span> </label> <label class="n_people radio-inline" >4 <input type="radio" name="number_people" value="4" checked="checked" /> <span class="checkmark"></span> </label> </div> <br /> <div id="group-two"> <p>Second group</p> <label class="n_people radio-inline" >1 <input type="radio" name="number_people2" value="1" /> <span class="checkmark"></span> </label> <label class="n_people radio-inline" >2 <input type="radio" name="number_people2" value="2" /> <span class="checkmark"></span> </label> <label class="n_people radio-inline" >3 <input type="radio" name="number_people2" value="3" /> <span class="checkmark"></span> </label> <label class="n_people radio-inline" >4 <input type="radio" name="number_people2" value="4" checked="checked" /> <span class="checkmark"></span> </label> </div>