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

您可能想要在进行任何类型的值检查之前等待事件，否则脚本将只运行一次，并且在这个时间点上，没有任何机会被检查过。

您可以将change event listener附加到每个收音机中...

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 event handler，然后对数据进行一些检查。

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>

使用input [type =“ radio”]进行验证始终返回false

2 个答案: