在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">
    <input type="radio" name="option1" id="option1" value="Right"/>Right
    <input type="radio" name="option2" id="option2" value="Left"/>Left
</form>

<input onclick="checkResponse()" type="button" value="Continue" />

checkResponse函数将检查当用户单击"继续按钮"时是否对任何选项进行了检查。

<script type="text/javascript">
    function checkResponse(){
        if (isChecked('option1') || isChecked('option2')){
            next();
        }else{
            alert("Your error message")
        }
    }
    function isChecked(id){
     return document.getElementById(id).checked; //returns true if any options are selected
    }
</script>

Answer 2

您需要将ID更改为不同的事物。对于收音机按钮，"名称"是无线电按钮组。除非您要单独查看每个项目，否

https://www.w3schools.com/tags/att_input_type_radio.asp

<input id="optionRight" name="groupName" type="radio" value="Right" /> <input id="optionLeft" name="groupName" type="radio" value="Left" />

另外，您默认可以按选择的单选按钮之一。

默认情况下如何选择一个广播按钮？

<input id="option1" name="groupName" type="radio" value="Right" checked="checked" />

Answer 3

我了解的是，如果没有检查任何一个，则需要显示错误，如果检查了其中一个。

要这样做，您将需要检查是否检查其中的任何一个都不检查其值＆amp;给每个广播按钮一个唯一的ID。您可以做类似于此

的事情

function isChecked(id){//Instead of filledOut
  return document.getElementById(id).checked;
 //.checked returns true or false
}
if (isChecked('option1') || isChecked('option2')){
 next();
}else{
 alert("Your error message")
}

如果需要，则获得该值的另一个功能：

function getCheckedBtnValue(){
  if(isChecked('option1')) return document.getElementById('option1').value
  if(isChecked('option2')) return document.getElementById('option2').value
  return null
}
//You can also use this function to check if any of them is checked
const value = getCheckedBtnValue();
if(value){
 next();
}else{
 alert("Your error message");
}

另外，尽量不要在HTML元素的内部写JavaScript，很难经常阅读。保持javascripting。