我正在创建一个 Web 表单，其中包含一个包含单选按钮作为用户选择的选项的表格。我已按 ID 对行进行分组，并希望页面不允许用户继续，除非每一行都有有效的选择。我对此有问题，因为只要一个组有选择并且不评估所有组，表单就会发布。出于测试目的，我包含 2 个组，但我的网络表单实际上将包含更多。我对 C# 和 JavaScript 很陌生，但我知道我有一个问题，两者都使用 isChecked，但我相信这不是唯一的问题。我以此作为指导 https://www.codemahal.com/video/radio-buttons-and-form-validation/
这是我的代码
<script type="text/javascript">
function isChecked() {
var checkedITEx = document.getElementById('IT-Ex').checked;
var checkedITVG = document.getElementById('IT-VG').checked;
var checkedITGd = document.getElementById('IT-Gd').checked;
var checkedITAve = document.getElementById('IT-Ave').checked;
var checkedITPoor = document.getElementById('IT-Poor').checked;
if (checkedITEx == false && checkedITVG == false && checkedITGd == false && checkedITAve == false && checkedITPoor == false) {
alert('You need to select a rating for Independent Thinking');
return false;
}
else {
return true;
}
}
function isChecked() {
var checkedResEx = document.getElementById('Res-Ex').checked;
var checkedResVG = document.getElementById('Res-VG').checked;
var checkedResGd = document.getElementById('Res-Gd').checked;
var checkedResAve = document.getElementById('Res-Ave').checked;
var checkedResPoor = document.getElementById('Res-Poor').checked;
if (checkedResEx == false && checkedResVG == false && checkedResGd == false && checkedResAve == false && checkedResPoor == false) {
alert('You need to select a rating for Resiliance');
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server" action="Default.aspx" method="get" onsubmit="return isChecked();">
<table>
<tr>
<td class="auto-style1"></td>
<td class="auto-style2">Excellent</td>
<td class="auto-style2">Very Good</td>
<td class="auto-style2">Good</td>
<td class="auto-style2">Average</td>
<td class="auto-style2">Poor</td>
</tr>
<tr>
<td class="auto-style1">Independent Thinking</td>
<td class="auto-style2"><input type="radio" name="IndThink" value ="Independent Thinking - Excellent" id="IT-Ex"/></td>
<td class="auto-style2"><input type="radio" name="IndThink" value ="Independent Thinking - Very Good" id="IT-VG"/></td>
<td class="auto-style2"><input type="radio" name="IndThink" value ="Independent Thinking - Good" id="IT-Gd"/></td>
<td class="auto-style2"><input type="radio" name="IndThink" value ="Independent Thinking - Average" id="IT-Ave"/></td>
<td class="auto-style2"><input type="radio" name="IndThink" value ="Independent Thinking - Poor" id="IT-Poor"/></td>
</tr>
<tr>
<td class="auto-style1">Resiliance</td>
<td class="auto-style2"><input type="radio" name="Res" value ="Resiliance - Excellent" id="Res-Ex"/></td>
<td class="auto-style2"><input type="radio" name="Res" value ="Resiliance - Very Good" id="Res-VG"/></td>
<td class="auto-style2"><input type="radio" name="Res" value ="Resiliance - Good" id="Res-Gd"/></td>
<td class="auto-style2"><input type="radio" name="Res" value ="Resiliance - Average" id="Res-Ave"/></td>
<td class="auto-style2"><input type="radio" name="Res" value ="Resiliance - Poor" id="Res-Poor"/></td>
</tr>
</table>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
function isOneChecked() {
var checkedResEx = document.getElementById('Res-Ex').checked;
var checkedResVG = document.getElementById('Res-VG').checked;
var checkedResGd = document.getElementById('Res-Gd').checked;
var checkedResAve = document.getElementById('Res-Ave').checked;
var checkedResPoor = document.getElementById('Res-Poor').checked;
return (checkedResEx || checkedResVG || checkedResGd || checkedResAve || checkedResPoor);
}
如果至少选中了一个复选框，这将返回 true。
我已经设法让这个合作。这是我最终使用的代码：
<script type="text/javascript">
function isChecked()
{
var checkedITEx = document.getElementById('IT-Ex').checked;
var checkedITVG = document.getElementById('IT-VG').checked;
var checkedITGd = document.getElementById('IT-Gd').checked;
var checkedITAve = document.getElementById('IT-Ave').checked;
var checkedITPoor = document.getElementById('IT-Poor').checked;
if (checkedITEx == false && checkedITVG == false && checkedITGd == false && checkedITAve == false && checkedITPoor == false)
{
alert('You need to select a rating for Independent Thinking');
return false;
}
else
{
var checkedResEx = document.getElementById('Res-Ex').checked;
var checkedResVG = document.getElementById('Res-VG').checked;
var checkedResGd = document.getElementById('Res-Gd').checked;
var checkedResAve = document.getElementById('Res-Ave').checked;
var checkedResPoor = document.getElementById('Res-Poor').checked;
if (checkedResEx == false && checkedResVG == false && checkedResGd == false && checkedResAve == false && checkedResPoor == false)
{
alert('You need to select a rating for Resiliance');
return false;
}
else
{
return true;
}
}
}