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

您需要将ID更改为其他内容。对于单选按钮，“名称”是单选按钮组。除非您要逐个查看每个项目，否则不需要ID，并且如果给他们提供ID，则它们必须与其他每个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" />

此外，您还可以将单选按钮之一设置为默认选中状态。

How to select a radio button by default?

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

Answer 2

我了解到，如果未选中任何内容，则需要显示错误；如果选中其中之一，则需要继续。

为此，您将需要检查是否选中了其中一个而不检查其值，并为每个单选按钮赋予唯一的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，因为这经常很难阅读。继续使用JavaScript。

Answer 3

public interface UserService extends UserDetailsService {

   UserDO loadUserByUsername(String username) throws UsernameNotFoundException;

}

checkResponse函数将检查用户单击继续按钮时是否选择了任何选项。

<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" />

要求使用Javascript选择单选按钮

3 个答案: