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

Question

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

使用JQuery检查是否已检查组中的单选按钮

但这对我不起作用

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   



    });
});

如果未选中任何内容，则不会显示任何警告消息。 否则都在选择其中之一时发出警报消息。

Answer 1

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

$(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/

Answer 2

这里的问题是，当您未checked单选按钮并且试图在console出错时，您正试图获取单选按钮的value 。 因此，首先您需要检查是否已checked任何内容，如果是，则分配值，否则分配空值，如下所示：

演示

$(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');
        }
    });
});

Answer 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
 });
});

演示