javascript - check for empty radio input

Question

I want to check if the user selects a radio button. I have coded this:

HTML

<form action="myServlet" method="post">
        <input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
        <input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
        <input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">        
        //etc
<button type="submit" class="myButton" onclick="sendSuccess()">Submit</button>
</form>

JS

   function sendSuccess(){

        var len = document.formRate.ratingInput1.length;
        var flag;

        for(i=0; i<len; i++){
            if (document.formRate.ratingInput[i].checked){
                flag = true;
            }
            else{
                flag = false;
                break;
            }   
        }

        if(flag === false){
            console.log('noooooo');
            return false;
        }else{
            console.log('yesssss');
        }
    }

But its not working.

Answer 1

您可以jQuery使用Attribute Equals Selector [name="value"]来查找具有相同名称的单选按钮并:checked仅获取选中的元素。您可以使用length来检查是否有任何选中的单选按钮。如果一个或多个单选按钮被选中，则该值length将为零，如果没有选中任何按钮，则该值将大于零。radio

现场演示

if($('[name=ratingInput1]:checked').length)
     console.log('Yes');
else
     console.log('No');

Answer 2

工作演示 http://jsfiddle.net/cXPYQ/

希望这符合您的需求:) 代码

  $("form").submit(function () {
    var flag = true;
    $(':radio').each(function () {
        name = $(this).attr('name');
        if (flag && !$(':radio[name="' + name + '"]:checked').length) {
            alert(name + ' group not checked');
            flag = false;
        }
    });
    return flag;
});

Answer 3

尝试这个

<form name="formRate" action="myServlet" method="post">
    <input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
    <input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
    <input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">        
    <button type="submit" class="myButton" onclick="return sendSuccess();">Submit</button>
</form>

function sendSuccess(){

var flag = false;

var len = $('input:radio[name="ratingInput1"]:checked').size();

    if(len == 0){
        console.log('noooooo');
        flag = false;
    }else{
        console.log('yesssss');
        flag = true;
    }
return flag;
}

Answer 4

它是一个带有单选按钮的简单表单，因此您只需为表单命名为 formRate，并且不需要 jQuery，以下将起作用

HTML

<form name="formRate" action="myServlet" method="post">
    <input type="radio" id="rating-input-1-5" name="ratingInput1" value="5">
    <input type="radio" id="rating-input-1-4" name="ratingInput1" value="4">
    <input type="radio" id="rating-input-1-3" name="ratingInput1" value="4">        
    <button type="submit" class="myButton" onclick="return sendSuccess();">Submit</button>
</form>

Javascript

function sendSuccess() {
rating = document.forms["formname"]["ratingInput1"].value;
if(rating > 0){
    console.log(rating);
 }
 else {
    console.log('No rating');
 }
 return false;

}

Answer 5

var flag = $('[name="ratingInput1"]').is(':checked');

如果没有选择具有该名称的收音机，将返回 false。