Как использовать JavaScript для проверки, если выбран 1 переключатель

Question

Я Нуб, который не может понять, как исправить мою сломанную проверку JavaScript для моей формы. Я полагаю, что проблема связана с моим селектором (определенным неработающим комментарием), но я недостаточно хорошо знаю javascript, чтобы знать, как его исправить. Я пытаюсь сделать форму с несколькими различными типами ввода и проверить каждый. Мой синтаксис работает нормально для обычного ввода текста и выпадающих меню, но не для радио. Простые ответы (которые я могу понять) предпочтительнее сложных ответов (которые я не могу).

Я рассмотрел эту проблему здесь, и не хочу проверять каждую радиокнопку в отдельности, то есть, если выбор = 1 .., если выбор = 2 .., если выбор = 99, только эта 1 из кнопки были выбраны. Я не уверен, нужен ли для этого цикл for или есть способ сделать это, который похож на мой существующий код, который работает для других входных данных.

document.querySelector('form').onsubmit = function() {
  if (!document.querySelector('select[name=country]').value) {
    alert('You must choose a country');
    return false;
  }

  // <!--NOT WORKING PART-->    
  else if (!document.querySelector('custom-control-input[type=radio]:checked').value) {
    alert('You must select a gender');
    return false;
  }
  return true;
};

<div class="form-group">
  <select name="country">

    <option disabled selected value="">Country</option>
    <option value="Canada">Canada</option>
    </option>
    <option value="USA">USA</option>
    </option>
  </select>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="customRadio" id="customRadio1" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Male</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="customRadio" id="customRadio1" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Female</label>
</div>

Answer 1

Ваши аргументы в селекторе запросов неверны.

Это сработало для меня:

else if (!document.querySelector('[type=radio]').checked) {
    alert('You must select a gender');
    return false;
}

Answer 2

Один метод, который вы уже сказали, выбрав каждый отдельный элемент с помощью id, а другой следующий

 function checkRadioButton() {
    return ($('input[type=radio]:checked').size() > 0);
}

Он проверит всю страницу и вернет единственную проверенную кнопку возврата, если она есть.