Question

我有3个无线电组和6个单选按钮。在表单的提交事件期间，用户应该检查来自不同无线电组的至少一个无线电，否则提交事件返回false但是当我尝试通过使用以下实现来执行此操作时，它总是返回false，因此我无法现在发布此表单。可能是什么问题？

HTML

<form id="internshipStage2Form" method="POST" action="form2.php">
    <table id="companyInformation" border="1">
        <tr>
            <td valign="middle" align="center">
                <label id="" for="">Did the engineering students work as trainees in the company in the previous years?</label>
            </td>
            <td valign="middle" align="center">
                Yes<input class="radioInput" id="g1Positive" type="radio" name="g1" value="YES"/>
                No<input class="radioInput" id="g1Negative" type="radio" name="g1" value="NO"/>
            </td>
        </tr>
        <tr>
            <td valign="middle" align="center">
                <label>Are the company owners and the top managers are your relatives ?</label>
            </td>
            <td valign="middle" align="center">
                Yes<input class="radioInput" id="g2Positive" type="radio" name="g2" value="YES"/>
                No<input class="radioInput" id="g2Negative" type="radio" name="g2" value="NO"/>
            </td>
        </tr>
        <tr>
            <td valign="middle" align="center">
                <label>Is the firm you declared above on this form same with the firm you intern firstly?</label>
            </td>
            <td valign="middle" align="center">
                Yes<input class="radioInput" id="g3Positive" type="radio" name="g3" value="YES"/>
                No<input class="radioInput" id="g3Negative" type="radio" name="g3" value="NO"/>
            </td>
        </tr>
    </table>
    <input id="sendButton" type="submit" name="sendButton2" value="SEND FOR APPROVEMENT"/>
</form>

JS

$('#internshipStage2Form').submit(function(){  
       var reqRadioFlag = 1;

       $('input:radio').each(function(){
            if(!$(this).is(':checked')){
              reqRadioFlag = 0;
              return false;
            } 
        });

        if(reqRadioFlag === 0){
           alert("Please fill all requiredd areas !");
           return false;
       }
});

Answer 1

试试这个

$('#internshipStage2Form').submit(function(event){  
    if($('input:radio:checked').length < 3)
    {
        alert("Please fill all requiredd areas !");
        return false;
    }
});

DEMO

Answer 2

您可以检查是否已检查每个组：

if ($('input[name=g1]:checked').length && $('input[name=g2]:checked').length && $('input[name=g3]:checked').length) //do submit

或检查是否有3个无线电检查

if ($('input:checked').length == 3) //do submit

Answer 3

你可以试试这个

$('table#companyInformation tr').each(function(){
     var elem =$(this).children("td").eq(1);
     if(!elem.find("input:radio:checked").length){
       reqRadioFlag = 0;
       return false;
     }
});

<强> DEMO

Answer 4

不确定为什么Hiral删除了他们的答案，认为它是最正确的。

<input type="radio" required />

只要集合中的一个单选按钮具有此属性，用户就需要选择单选按钮集的任何一个。这有点奇怪，但我可以保证你的确有效。

HTML5验证比jQuery更可靠，因为它根本不依赖于你。我们在代码中犯了错误并且会破坏事情，但使用required它并不重要。如果用户禁用JavaScript，它甚至可以工作;）

当然，一如既往，请务必验证服务器端！

如何控制单选按钮是否被选中？

4 个答案: