时间戳

首页 > 解决方案 > 多个单选按钮验证

javascript - 多个单选按钮验证

问题描述

我正在创建一个 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>

标签： javascriptc#radio-button

解决方案

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。

推荐阅读