验证表单以确保在一组中至少选中一个单选按钮答案

【问题标题】：Validate a form to ensure atleast one radio button is checked in a group验证表单以确保在一组中至少选中一个单选按钮
【发布时间】：2015-08-25 05:43:33
【问题描述】：

我正在制作一个带有单选按钮的表单。我能够验证除单选按钮之外的所有其他输入。我在这个网站上得到了一个公认的解决方案

Using JQuery to check if no radio button in a group has been checked

但这对我不起作用

http://jsfiddle.net/ghan_123/trr185L2/2/

我的代码

<input type='radio' name='datetime' value='1'>1
<input type='radio' name='datetime' value='2'>2
<input type='radio' name='datetime' value='3'>3
<input type='radio' name='datetime' value='4'>4
<input type='radio' name='datetime' value='5'>5
<br><button id='buttonnew'>validate</button>

jquery

$(document).ready(function(){
    $("#buttonnew").click(function(){

        var selection=document.querySelector('input[name="datetime"]:checked').value;
    // my method    
if(selection=='')
        {
            alert('please select a value');
        }
        else
        {
            alert('your selected value is '+selection);
        }
// end my method

        //  other method ( given in this site link above) 

  if (!$("input[name='datetime']:checked").val()) {
   alert('Nothing is checked!');
}
else {
  alert('One of the radio buttons is checked!');
}    
       // end other method   



    });
});

如果未检查任何内容，则不会出现警报消息。否则，两者都会在选择其中之一时发出警报消息。

【问题讨论】：

查看link

标签： jquery html forms

【解决方案1】：

这里的问题是，当没有checked 时，您试图获取单选按钮的value，并且它曾经在console 上出现错误。所以首先你需要检查是否有任何东西是checked，如果是，则分配值，否则分配空值，如下所示：

DEMO

$(document).ready(function(){
    $("#buttonnew").click(function(){
        var selection=document.querySelector('input[name="datetime"]:checked')!=null?
                      document.querySelector('input[name="datetime"]:checked').value:"";
        //Conditional operator
       if(selection!='')
        {
            alert('your selected value is '+selection);
        }
        else
        {
            alert('please select a time slot');
        }
    });
});

【讨论】：

【解决方案2】：

试试这个。我想你想要这样的东西。

$(document).ready(function(){
    $("#buttonnew").click(function(){

        var chek=document.querySelector('input[name="datetime"]:checked');
        if(chek!=null){
        var selection=document.querySelector('input[name="datetime"]:checked').value;
        console.log(selection);
    // my method    
if(selection=='')
        {
            alert('please select a time slot');
        }
        else
        {
            alert('your selected value is '+selection);
        }
        }
// end my mehod

        //  other method  
  if (!$("input[name='datetime']:checked").val()) {
   alert('Nothing is checked!');
}
else {
  alert('One of the radio buttons is checked!');
}      
       // end other method   



    });
});

jsfiddle 示例：http://jsfiddle.net/ghan_123/trr185L2/2/

【讨论】：

【解决方案3】：

只需使用此解决方案：

$(document).ready(function () {
 $("#buttonnew").click(function () {
    // variable for increament value
    var inc = 0;
    // loop over all of radio button
    $('[name="datetime"]').each(function () {
        // if any of radio button was checked
        // then increase inc variable to one value
        if ($(this).is(':checked')) inc++;
    });
    // if variable stay with 0 value
    // so, we know that no radio button was clicked
    if (inc == 0) {
        alert('Please check one');
        return;
    }

    // continue your another action
 });
});

DEMO

【讨论】：