проверенный переключатель после проверки одного из них

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

Каждый идентификатор может быть использован только один раз на страницу. Поэтому я изменил его на 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 2

Вы можете прикрепить прослушиватель щелчков к родительскому элементу обоих радиовходов, и при каждом нажатии любого из радиовходов вы проверяете их все с помощью 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>

Сторона Примечание: идентификатор каждого элемента должен быть уникальным. Вы не должны использовать идентификатор на обоих радиовходах

Answer 3

Атрибут id должен быть уникальным в документе, используйте класс вместо. При нажатии на любую кнопку вы можете установить атрибут флажок на 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>