檢查其中一個后檢查單選按鈕

Question

我有兩個單選按鈕，如下所示：

<label for="male">Male<br>
  <input type="radio" name="gender" id="male" value="male"><br>
  <input type="radio" name="gender1" id="male" value="male1"><br>
</label>

我如何通過單擊一個來檢查它們？ 例如單擊第一個收音機並檢查第一個和第二個

Answer 1

屬性id在文檔中必須是唯一的，請改用class 。 單擊任何按鈕時，您可以將checked屬性設置為true ：

 $('.male').click(function(){ $('.male').attr('checked', true); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="male">Male<br> <input type="radio" name="gender" class="male" value="male"><br> <input type="radio" name="gender1" class="male" value="male1"><br> </label>

Answer 2

每個 id 每頁只能使用一次。 所以我把它改成了male1和male2。

 let male1 = document.querySelector("#male1"); let male2 = document.querySelector("#male2"); male1.addEventListener("input", () => { male2.checked = "true"; }); male2.addEventListener("input", () => { male1.checked = "true"; });

 <label for="male">Male<br> <input type="radio" name="gender" id="male1" value="male"><br> <input type="radio" name="gender1" id="male2" value="male1"><br> </label>

Answer 3

您可以在兩個無線電輸入的父元素上附加一個單擊偵聽器，並且每當單擊任何無線電輸入時，您都可以通過 javascript 檢查所有這些

 const container = document.getElementById('container'); const radioInputs = document.querySelectorAll('input[type=radio]') container.addEventListener('click', (e) => { radioInputs.forEach(i => i.checked = true); });

 <div id="container"> <label for="male">Male<br> <input type="radio" name="gender" id="male" value="male"><br> <input type="radio" name="gender1" id="male1" value="male1"><br> </label> </div>

旁注：每個元素的 id 應該是唯一的。 您不應該在兩個無線電輸入上都使用 id