要求使用Javascript选择单选按钮

Question

我是JS的初学者，尝试创建一个带有两个选项（左/右）的单选按钮，其中需要选择两个选项之一才能使程序继续运行，否则它将显示错误屏幕。

我有一些代码可以阻止参与者继续按下它们（无论出现什么错误都将继续执行），或者使参与者不管什么都继续执行的代码（即即使他们没有继续执行该程序也可以继续执行）选择一个选项。）我觉得这可能与我的逻辑运算符有关，但我不确定。我尝试使用手动XOR，但这似乎不是问题。

我使用的是经过修改的代码，因此，请告知我是否可以/还应该包括其他内容！

<div class="radio"><label><input id="option1"  name="option1" type="radio" value="Right"  />Right</label></div>

<div class="radio"><label><input id="option1" name="option1" type="radio" value = "Left" />Left</label></div>

无论什么原因，都会导致错误的代码：

<input onclick="function filledOut(id) { return (document.getElementById(id).value == 'Left')} if(filledOut('option1') ) { next(); }else{ alert('Please provide a response.'); }" type="button" value="Continue" /> </div>

</div>

导致程序继续运行的代码：

<input onclick="function filledOut(id) { return ((document.getElementById(id).value == 'Left')|| (document.getElementById(id).value == 'Right'))} if(filledOut('option1') ) { next(); } else{ alert('Please provide a response.'); }" type="button" value="Continue" /> </div>

</div>

Answer 1

<form name="formName">&nbsp; &nbsp; <input type="radio" name="option1" id="option1" value="Right"/>Right&nbsp; &nbsp; <input type="radio" name="option2" id="option2" value="Left"/>Left</form><input onclick="checkResponse()" type="button" value="Continue" />当用户单击继续按钮时，checkResponse函数将检查是否选择了任何选项。<script type="text/javascript">&nbsp; &nbsp; function checkResponse(){&nbsp; &nbsp; &nbsp; &nbsp; if (isChecked('option1') || isChecked('option2')){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; next();&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Your error message")&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; function isChecked(id){&nbsp; &nbsp; &nbsp;return document.getElementById(id).checked; //returns true if any options are selected&nbsp; &nbsp; }</script>

Answer 2

我了解的是，如果未检查任何内容，则需要显示一个错误；如果检查其中之一，则需要继续。为此，您将需要检查是否选中了其中一个而不检查其值，并为每个单选按钮赋予唯一的ID。你可以做类似的事情function isChecked(id){//Instead of filledOut&nbsp; return document.getElementById(id).checked;&nbsp;//.checked returns true or false}if (isChecked('option1') || isChecked('option2')){&nbsp;next();}else{&nbsp;alert("Your error message")}如果需要，可以使用另一个函数来获取值：function getCheckedBtnValue(){&nbsp; if(isChecked('option1')) return document.getElementById('option1').value&nbsp; if(isChecked('option2')) return document.getElementById('option2').value&nbsp; return null}//You can also use this function to check if any of them is checkedconst value = getCheckedBtnValue();if(value){&nbsp;next();}else{&nbsp;alert("Your error message");}另外，请尽量不要在经常难以阅读的HTML元素内编写JavaScript。继续使用JavaScript。