我如何添加两个getElement和一个提交按钮，使一个If语句?

Question

总结:我正在寻找away添加两个单独的getElementbyId和一个提交按钮到一个If语句，以使其运行。

HTML例子:

<form>
<div>
<fieldset id="group1">
<input type="radio" name="type" id="h" value="1111" onclick="func2();" />0 Human</br>
<input type="radio" name="type" id="r" value="2222" onclick="func2();" />1 Robot</br>
<input type="radio" name="type" id="a" value="3333" onclick="func2();" />2 Animal</br>
</fieldset>
</div>
<div>
<fieldset id="group2">
<input type="radio" name="type" id="c" value="1111" onclick="func2();" />4 Jerry</br>
<input type="radio" name="type" id="b" value="2222" onclick="func2();" />5 Xr10Zbot</br>
<input type="radio" name="type" id="z" value="3333" onclick="func2();" />6 Girrafe</br>
</fieldset>
<p><input style="width: 60px;" type="submit" name="type" id="f" class="7" value="submit" onclick="func()2;" /></p </div>
</form>

JavaScript的例子:

<script>
function func2()
{
if(document.getElementById("h").checked) 
// I want for the if statment to require you to also have to check c and click submit to run
{
var val = document.getElementById("h").value;
alert(val);
}
else if(document.getElementById("r").checked)
{
var val = document.getElementById("r").value;
alert(val);
}
else if(document.getElementById("a").checked)
{
var val = document.getElementById("a").value;
alert(val);
}
}
</script>

我需要if语句来运行:

当你必须点击两个单选按钮并提交时，才能运行警报

if(document.getElementById("h").checked) + (document.getElementById("c").checked) + (document.getElementById("f")) 

Answer 1

我不太明白你想做什么。我希望我的解决方案能对你有所帮助。

一号

---

提交按钮有一个错别字。

• ❌NGonclick="func()2;"
• ✅okonclick="func2();"

问题2

具有相同name属性的单选按钮属于一组。因此，6个按钮中只能打开一个。#group1的一个按钮和#group2的一个按钮没有同时打开。修改name.

例如,

<fieldset id="group2">
<input name="type2">
<input name="type2">
<input name="type2">
</fieldset>

3

问题我认为对包括提交按钮在内的所有按钮使用func2()有点困难。我建议为它创建另一个函数。

---

我的解决方案这个JS在嵌入片段上不能正常工作。请复制、粘贴并在实际的编辑器(如Visual Studio Code)上运行。

// Get DOMs
var elementC = document.getElementById('c');
var submitButon = document.getElementById('f');
// Get #group1 radio buttons at once
var group1Buttons = document.querySelectorAll('#group1 [type="radio"]');
// These are needed in If statements
// var elementH = document.getElementById('h');
// var elementR = document.getElementById('r');
// var elementA = document.getElementById('a');
function func2(e) {
e.stopPropagation();
// You may use this If statement
// if (elementH.checked) {
//   alert(elementH.value);
// } else if (elementR.checked) {
//   alert(elementR.value);
// } else if (elementA.checked) {
//   alert(elementA.value);
// }
// I prefer this one because it's shorter.
alert(this.value);
}
function func3(e) {
e.stopPropagation();

if (!elementC.checked) {
e.preventDefault(); // Stop submitting
alert(`You need to check ${elementC.getAttribute('data-text')}!!`);
}
}
// When one of the radio buttons is clicked, executes func2()
group1Buttons.forEach(radio => radio.addEventListener('click', func2, false));
// When the submit button is clicked, executes func3()
submitButon.addEventListener('click', func3, false);

<form>
<div>
<!-- Removed onClick="func2()" -->
<!-- Added required to one of radio buttons -->
<fieldset id="group1">
<input type="radio" name="type" id="h" value="1111" required />0 Human</br>
<input type="radio" name="type" id="r" value="2222" />1 Robot</br>
<input type="radio" name="type" id="a" value="3333" />2 Animal</br>
</fieldset>
</div>
<div>
<!-- Removed onClick="func2()" -->
<!-- Added required to one of radio buttons -->
<!-- Change name: type => type2 -->
<!-- Added data-text attribute -->
<fieldset id="group2">
<input type="radio" name="type2" data-text="4 Jerry" id="c" value="1111" required />4 Jerry</br>
<input type="radio" name="type2" id="b" value="2222" />5 Xr10Zbot</br>
<input type="radio" name="type2" id="z" value="3333" />6 Girrafe</br>
</fieldset>
<!-- Removed onClick="func2()" -->
<p><input style="width: 60px;" type="submit" name="type" id="f" class="7" value="submit" /></p>
</div>
</form>