Проверка с помощью ввода [type = "radio"] всегда возвращает false

Question

У меня есть input[type="radio"], без опции по умолчанию, и мне нужно вернуть false, если ни один из этих параметров не отмечен.

Я изучаю только javascript, поэтому jquery, angular или любой другой будет полезен (на данный момент). Я могу перебрать radioObj и выбрать его значение, но я не могу вернуть false, если ни одна опция не отмечена (на самом деле, я не могу вернуть true)

не совсем то, что у меня есть, но ...

<input type="radio" id="rd1" name="radioGrp">opt1
<br>
<input type="radio" id="rd2" name="radioGrp">opt2

и в JS у меня есть ...

var rdObj = document.getElementByName("radioGrp");
var selectedValue;

for (var i = 0, length = rdObj.length; i < length; i++){
if(!rdObj[i].checked){
        alert("Select one option");
        return false;
    }else{
        //do something with value of radio checked value
    }
}

Этот код всегда дает мне alert("Select one option"), независимо от того, выберу я один вариант или нет. Требуется проверка.

Любой хель будет очень признателен

Answer 1

Возможно, вы захотите подождать события, прежде чем выполнять какую-либо проверку значений, иначе ваш скрипт будет запускаться только один раз, и на данный момент ничего не будет проверено.

Вы можете подключить прослушиватель события изменения к каждой из ваших радиостанций ...

var myRadios = document.querySelectorAll('[name=radioGrp]');
var selectedValue;

myRadios.forEach(radio => {
  radio.addEventListener('change', changeHandler);
})

function changeHandler(evt) {
  // do some check in here
  console.log(evt.target.value)
}

<input type="radio" id="rd1" name="radioGrp" value='opt1'>opt1
<br>
<input type="radio" id="rd2" name="radioGrp" value='opt2'>opt2

... или вы можете прикрепить обработчик события submit к вашей форме и затем выполнить некоторую проверку ваших данных.

const myForm = document.querySelector('form');
myForm.addEventListener('submit', submitHandler);

function submitHandler(evt) {
  evt.preventDefault();
  const data = new FormData(evt.target);
  const optionVal = data.get('radioGrp');
  // do some check in here
  if (!optionVal) {
    console.log(`Please select a value`)
  } else {
    console.log(`Thanks for selecting ${optionVal}`)
  }
}

<form>
  <input type="radio" id="rd1" name="radioGrp" value='opt1'>opt1
  <br>
  <input type="radio" id="rd2" name="radioGrp" value='opt2'>opt2
  <input type="submit">
</form>

Answer 2

Вы можете попробовать это:

function validateForm() {
  var radios = document.getElementsByName("radioGrp");
  var formValid = false;

  for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
      formValid = true;
      break;
    }
  }

  if (!formValid) {
    alert("Select one option");
  }

  return formValid;
}

<form name="form1" action="#" onsubmit="return validateForm();" method="post">
    
    <input type="radio" id="rd1" name="radioGrp">opt1
    <br>
    <input type="radio" id="rd2" name="radioGrp">opt2
    <br>
    <input type="submit" value="Submit">

</form>