javascript - Alert if ANY radio options are not checked - Stack Overflow

admin管理员组

文章数量:1392068

I have a form with 3 questions that have 3 radio options each. I want the form to send an alert if ANY of the questions are left blank. This code sends an alert only if ALL of the questions are left blank:

if (!$("input").is(':checked')) {
    alert("You left one blank!");
}

So, for example, if I have only one question answered, I want the alert to send. Instead, it continues on with the code.

I have a form with 3 questions that have 3 radio options each. I want the form to send an alert if ANY of the questions are left blank. This code sends an alert only if ALL of the questions are left blank:

if (!$("input").is(':checked')) {
    alert("You left one blank!");
}

So, for example, if I have only one question answered, I want the alert to send. Instead, it continues on with the code.

• javascript
• jquery
• forms
• radio-button

Share Improve this question Follow edited Mar 28, 2013 at 19:13 dfsq 193k2626 gold badges242242 silver badges259259 bronze badges asked Mar 28, 2013 at 19:12 PixelPixel 10133 silver badges1111 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You have 3 radio groups, so there will be 3 checked inputs and 6 unchecked inputs, I suggest:

if ( $("input[type=radio]:checked").length < 3 ) {
    alert('Please answer all of the questions');
}

Try this:

$(document).ready(function () {
    $("#btn1").on("click", function () {
        var count = 0;
        var questions = $("div.question");
        questions.each(function () {
            if ($(this).find("input").filter('[type="radio"]').filter(":checked").length > 0) {
                count++;
            }
        });
        if (count >= questions.length) {
            alert("all good");
        } else {
            alert("something not checked");
        }
    });
});

With the HTML:

<div class="question">
    Question 1:
    <input type="radio" name="radio1" />
    <input type="radio" name="radio1" />
    <input type="radio" name="radio1" />
</div>

<div class="question">
    Question 2:
    <input type="radio" name="radio2" />
    <input type="radio" name="radio2" />
    <input type="radio" name="radio2" />
</div>

<div class="question">
    Question 3:
    <input type="radio" name="radio3" />
    <input type="radio" name="radio3" />
    <input type="radio" name="radio3" />
</div>

<div>
    <input type="button" id="btn1" value="Submit" />
</div>

http://jsfiddle/4yQHv/1/

You can change if (count >= questions.length) { to be === instead of >= to make sure exactly 1 radio button is chosen for every question. Otherwise, this allows for more than one radio button to be chosen (which isn't exactly possible when they're grouped by name attribute)...but just wanted to point that out.

http://jsfiddle/tVUuW/

<form>
    <input type="radio" name="facepunch" class="facepunch" value="1" />
    <input type="radio" name="facepunch" class="facepunch" value="2" />
    <input type="radio" name="facepunch" class="facepunch" value="3" />
    <br />
    <input type="radio" name="stack" class="stack" value="1" />
    <input type="radio" name="stack" class="stack" value="2" />
    <input type="radio" name="stack" class="stack" value="3" />
    <br />
    <input id="button" type="button">
</form>

$(document).ready(function(){
    $('#button').click(function(){
        if(!$("input.facepunch:checked").val()) {
            alert("Please select facepunch");
        }

        if(!$("input.stack:checked").val()) {
            alert("Please select stack");
        }
    });
});

If you have only few groups of radios you can use this method, this is one way to validate user data.

I remend you to check out one of the great jQuery Validation Plugins out there: jzaefferer plugin, bassistance plugin

Also, Make sure you validate it on the server side as well! The user can send request to your server from somewhere else or even disable javascript on his browser

You can loop through all your radio buttons and see if any of them is unchecked:

$('input[type="radio"]').each(function () {
       if( ! $(this).is(':checked') ) {
           alert('You left one blank!');
           return false; //exit function, so alert won't show multiple times
       }
    });

Example

本文标签： javascriptAlert if ANY radio options are not checkedStack Overflow