Question

我正在创建一个网页表单，其中包含一个包含单选按钮的表格，供用户选择。我已按ID对行进行分组，并希望页面不允许用户继续，除非每行都有有效选择。只要一个组有一个选择并且没有评估所有组，我就会遇到这个问题。我已经包含了两组用于测试目的，但我的webform实际上包含更多。我是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>

Answer 1

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。

Answer 2

我已经设法让这个合作了。这是我最终使用的代码：

<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;

                }
     }
 }

多个单选按钮验证

2 个答案: