我正在尝试同时验证多组单选按钮。我不仅在验证它们时遇到麻烦,而且在div中也显示了错误。选择该选项后,我需要验证并保存值,以便以后可以将值保存在本地存储中。 (此刻我不想打印它,我只想通过值进行验证并确保已选择某些内容)我不确定自己做错了什么,这是我的代码:https://jsfiddle.net/7ace6uws/
由于我无法仅发布jsfiddle,并且还需要与代码一起出现,所以这是我的HTML:
<tr>
<td><label>Whats your favorite color:</label:>
</td>
<div id="color"></div>
<td>
<fieldset id="group1">
<input type="radio" value="blue" name="color">Blue
<input type="radio" value="red" name="color">Red
<div>
</div>
</fieldset>
</td>
</tr>
<tr>
<td><label>What is your favorite food:</label></td>
<div id="food"></div>
<td>
<fieldset id="group2">
<input type="radio" id="pizza" name="food">Pizza
<input type="radio" id="cake" name="food">Cake
</fieldset>
</td>
</tr>
<tr>
<td><label>Do you go to school:</label></td>
<div id="school"></div>
<td>
<fieldset id="group3">
<input type="radio" id="yes" name="school">Yes
<input type="radio" id="no" name="school">No
</fieldset>
</td>
</tr>
<input type="button" value="Save" onclick="validateForm();" />
关于可能的重复项的注释:我知道之前曾有人问过这个问题。我已经阅读过类似问题的答案,但仍然迷路。对于某些答案,我很难理解Javascript,因为它们使用了称为模板文字的东西。一些答案还使用了jQuery,我也还没有学过。一些答案也使用了formData(https://developer.mozilla.org/en-US/docs/Web/API/FormData),但我也还没有学到,所以我试图使用到目前为止所知道的基本javascript编写代码。
您的if可能有一些问题,要比较两件事,您必须使用&&而不是&,在这种情况下,您要尝试的是or或(||),因为您要检查蓝色是否为checkod或红色被选中。
[并且添加一个使您的生活更轻松的技巧,将id放在javascript代码中存在的元素上后,您无需编写document.getElementById(“ myid”)即可使用它:
myid.dosomestuff();
textContent是innerHTML的最新替代品,例如,它摆脱了文本中的html标签。您也可能想摆脱自己的return语句:
function validateForm(){
if(! (blue.checked || red.checked)){
color.textContent="Please select a color";
}
else{
color.textContent="";
}
if(! (pizza.checked || cake.checked)){
food.textContent="Please select a food";
}
else{
food.textContent="";
}
if(! (yes.checked || no.checked)){
school.textContent="Please select an option if you go to school";
}
else{
school.textContent="";
}
}
<tr>
<td><label>Whats your favorite color:</label:>
</td>
<div id="color"></div>
<td>
<fieldset id="group1">
<input id="blue" type="radio" value="blue" name="color">Blue
<input id="red" type="radio" value="red" name="color">Red
<div>
</div>
</fieldset>
</td>
</tr>
<tr>
<td><label>What is your favorite food:</label></td>
<div id="food"></div>
<td>
<fieldset id="group2">
<input type="radio" id="pizza" name="food">Pizza
<input type="radio" id="cake" name="food">Cake
</fieldset>
</td>
</tr>
<tr>
<td><label>Do you go to school:</label></td>
<div id="school"></div>
<td>
<fieldset id="group3">
<input type="radio" id="yes" name="school">Yes
<input type="radio" id="no" name="school">No
</fieldset>
</td>
</tr>
<input type="button" value="Save" onclick="validateForm();" />