Question

我对Javascript不是很擅长，所以我想请求以下方面的帮助：我有一个表单，有多个无线电组（由PHP代码生成，所以我不知道他们的名字或将出现多少），我需要检查他们是否被选中。如果不是，我想向用户显示哪个问题没有得到解答（没有警告信息，但可以是文本形式或问题字母变为红色）。

我试过谷歌搜索问题，但以前的答案都不适合我的情况。

到目前为止，这是我的代码：

＆＃13;

function formCheck(formID) {
var eLabel=document.getElementById(formID).getElementsByTagName("label");
var radionames=[];
var eInput=document.getElementById(formID).getElementsByTagName("input");
var checker=true;
for (var i=0; i<eInput.length; i++) {
	if (eInput[i].checked) {
		radionames.push(eInput[i].name);
	}
}
for (var i=0; i<eInput.length; i++) {
	for (var j=0; j<radionames.length; j++) {
		if (eInput[i]==radionames[j]) {
		checker=true;
		}
		else {
		alert();
		checker=false;
		}
	}
}
return checker;

}

＆＃13;

<form method="post" action="something.php" id="form1" name="form1">
<div class="que">que 1</div>
<div class="answ"><label><input name="2" value="7" type="radio">Answer 1</label></div>
<div class="answ"><label><input name="2" value="5" type="radio">Answer 2</label></div>
<div class="answ"><label><input name="2" value="8" type="radio">Answer 3</label></div>
<div class="answ"><label><input name="2" value="6" type="radio">Answer 4</label></div>
<div class="que">que 2</div>
<div class="answ"><label><input name="1" value="4" type="radio">Answer 1</label></div>
<div class="answ"><label><input name="1" value="1" type="radio">Answer 2</label></div>
<div class="answ"><label><input name="1" value="2" type="radio">Answer 3</label></div>
<div class="answ"><label><input name="1" value="3" type="radio">Answer 4</label></div>

<input class="submit_button" value="Submit the form" onclick="return formCheck('form1');" type="submit">
</form>

＆＃13;

我想创建一个带有选中输入的数组＆＃34; group＆＃34;名称，并将其与所有输入组名称进行比较...其余的将显示错误（红色文本，消息，不重要）。问题是这个代码并没有真正做我能看到的任何事情，并且即使我没有检查任何东西也会显示出something.php ... 如果这不是一个好方法，我可以接受任何建议。

（我不想使用jQuery，代码也必须在旧版浏览器上运行。）

对不起我的英语，它不是我的母语＆amp; 感谢您的帮助！甲

Answer 1

在javascript中的第二个For循环：

使用这一行：

if（eInput [i] .value == radionames [j]）{

而不是：if（eInput [i] == radionames [j]）{

你必须真正获得eInput [i]

的价值

Answer 2

您可以使用document.querySelectorAll获取所有输入。您也可以通过传递输入类型对其进行微调。然后从单选按钮组中过滤出name

function getCheckedButton() {
  var tempNames = [];
  // get all radio button and loop through it to get it's name.
  // use a tempArray to keep unique names
  var radios = document.querySelectorAll('input').forEach(function(item) {
  // if the name is not present then and only then adding name to the array  
  if (tempNames.indexOf(item.name) === -1) {
      tempNames.push(item.name)
    }
  })
  // now looping through temp array
  for (var i = 0; i < tempNames.length; i++) {
    // using the name to select the radio button group to check if any of radio 
    // button in this group is checked or not
    // if not checked then it will give null
    if (document.querySelector('input[name="' + tempNames[i] + '"]:checked') !== null) {
      console.log(document.querySelector('input[name="' + tempNames[i] + '"]:checked').value)
    } else {
      console.log("Radio button of group value " + tempNames[i] + " is unchecked")

    }

  }
}

<div class="que">
  que 1</div>
<div class="answ">
  <label>
    <input name="2" value="7" type="radio">Answer 1</label>
</div>
<div class="answ">
  <label>
    <input name="2" value="5" type="radio">Answer 2</label>
</div>
<div class="answ">
  <label>
    <input name="2" value="8" type="radio">Answer 3</label>
</div>
<div class="answ">
  <label>
    <input name="2" value="6" type="radio">Answer 4</label>
</div>
<div class="que">que 2</div>
<div class="answ">
  <label>
    <input name="1" value="4" type="radio">Answer 1</label>
</div>
<div class="answ">
  <label>
    <input name="1" value="1" type="radio">Answer 2</label>
</div>
<div class="answ">
  <label>
    <input name="1" value="2" type="radio">Answer 3</label>
</div>
<div class="answ">
  <label>
    <input name="1" value="3" type="radio">Answer 4</label>
</div>
<button onclick="getCheckedButton()">Get checked buttons</button>

检查是否选中了多个单选按钮

2 个答案: