如何检查以确保我所有的input：radio元素都具有值？

Question

I'm working on a form, and I've got a code that works for validating radio fields. However I plan on having many, MANY radio fields and I feel that my current method, which names each radio field individually, to be a bit tedious. I feel there must be a way I can simply select all of them to make sure they've all been checked before processing the form.

Here is my jsFiddle

Current jQuery

$("form").on("keyup change", function(){

food = $(":checked[name=food]");
color = $(":checked[name=color]");

if (food.val() == "" || food.val() == undefined || 
   color.val() == "" || color.val() == undefined){

//Do stuff

} else {

//Do other stuff

}
});

jQuery I'm trying

$("form").on("keyup change", function(){

radio_req = $(".required:checked[type=radio]");

if ( radio_req == "" || radio_req == undefined ) {

//Do stuff

} else {

//Do other stuff

}
});

With the 2nd one, I'm trying to see if I can just add a class of required to all my radio fields, and then just see if any .required radio buttons are left unselected/undefined. I feel there has to be a way for this to work. Am I on the right track? I feel like I'm just not selecting this right.

Answer 1

I have updated your fiddle , check it ! I hope it will solve your problem.

You can test the snippet under. This is the part i modified :

var checker = function(){    

var checked = $.unique($(".required:checked[type=radio]").map(function(){
    return  this.name;
}));
var not_checked = $.unique($(".required:not(:checked)[type=radio]").map(function(){
    return  this.name;
}));

if (checked.length !== not_checked.length){

    $("#submit").prop("disabled", true).removeClass("valid").addClass("invalid");
    $(".submit").text("* All fields must be completed and contain valid entries before submitting.");


} else {

$("#submit").prop("disabled", false).removeClass("invalid").addClass("valid");
    $(".submit").text("");
}   
};
$("form").on("keyup change", checker);
checker();

---

 $(document).ready(function(){ // for each Question we have 3 choices: // so when we answer we have 1 checked and 2 unchecked // we loop over question // we fill 2 arrays(checked, unchecked) // with names of radio // for each question we will have something like that // Question 1 : food // checked = ['food']; notchecked = ['food','food'] // we make them unique ! it becomes // checked = ['food']; notchecked = ['food']; // we know now that the First question have been answered // we loop over all question : // checked = ['food'] , notchecked = ['food' , 'color' , 'town' , 'country' , 'car'] // we wait for checking ! // let answer Qestion 2 // checked = ['food' , 'color] , notchecked = ['food' , 'color' , 'town' , 'country' , 'car'] // etc etc . . . // when checked.length === notchecked.length => we have an answer for all question var checker = function(){ var checked = $.unique( $(".required:checked[type=radio]").map(function(){ return this.name; }) ); var not_checked = $.unique( $(".required:not(:checked)[type=radio]").map(function(){ return this.name; }) ); if (checked.length !== not_checked.length){ $("#submit").prop("disabled", true).removeClass("valid").addClass("invalid"); $(".submit").text("* All fields must be completed and contain valid entries before submitting."); } else { $("#submit").prop("disabled", false).removeClass("invalid").addClass("valid"); $(".submit").text(""); } }; $("form").on("keyup change", checker); checker(); }); 

 input { margin: 7px; } .valid { background-color: green; border: 3px solid darkgreen; color: white; } .invalid { background-color: grey; border: 3px solid darkgrey; color: black; } .error { color: red; } #submit { display: block; border-radius: 10px 10px 10px 10px; width: 130px; margin: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <br>Which of the following do you like the most? <br> <input type="radio" class="required" name="food" value="pizza">Pizza <input type="radio" class="required" name="food" value="burgers">Burgers <input type="radio" class="required" name="food" value="Salads">Salads <br> <br>Which of the following colors do you like the most? <br> <input type="radio" class="required" name="color" value="red">Red <input type="radio" class="required" name="color" value="blue">Blue <input type="radio" class="required" name="color" value="yellow">Yellow <br> <br>Which of the following town do you like the most? <br> <input type="radio" class="required" name="town" value="red">New York <input type="radio" class="required" name="town" value="blue">Miami <input type="radio" class="required" name="town" value="yellow">Las Vegas <br> <br>Which of the following country do you like the most? <br> <input type="radio" class="required" name="country" value="red">USA <input type="radio" class="required" name="country" value="blue">Canada <input type="radio" class="required" name="country" value="yellow">Chili <br> <br>Which of the following car do you like the most? <br> <input type="radio" class="required" name="car" value="red">Ferrari <input type="radio" class="required" name="car" value="blue">Dodge <input type="radio" class="required" name="car" value="yellow">Chevrolet <br><br> <input type="submit" id="submit" class="invalid"> <span class="submit error"></span> </form> 

Answer 2

You can iterate through all the radio buttons that have a name attribute :radio[name] in combination with an array, say examined , that helps you skip buttons that have already been checked. This should be work irrespective of how many sets of radio buttons there are in you form.

$('form').on('input change', function(e) {
    e.preventDefault();
    var all_selected = true;
    var examined = [];
    $(':radio[name]').each(function() {
        if( examined.indexOf( this.name ) === -1 ) {
            examined.push( this.name );
            if( !$(':radio:checked[name=' + this.name + ']').length ) {
                all_selected = false;
                return false;
            }
        }
    });
    if( all_selected ) {
        //DO STUFF
    } else {
        //DO OTHER STUFF
    }
});

 $(function() { $('form').on('input change', function(e) { e.preventDefault(); var all_selected = true; var examined = []; $(':radio[name]').each(function() { if( examined.indexOf( this.name ) === -1 ) { examined.push( this.name ); if( !$(':radio:checked[name=' + this.name + ']').length ) { all_selected = false; return false; } } }); if( all_selected ) { //DO STUFF console.log( 'All parts completed' ); } else { //DO OTHER STUFF console.log( 'Form not complete' ); } }); }); 

 input { margin: 7px; } .valid { background-color: green; border: 3px solid darkgreen; color: white; } .invalid { background-color: grey; border: 3px solid darkgrey; color: black; } .error { color: red; } #submit { display: block; border-radius: 10px 10px 10px 10px; width: 130px; margin: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> Which of the following do you like the most?<br> <input type="radio" class="required" name="food" value="pizza">Pizza <input type="radio" class="required" name="food" value="burgers">Burgers <input type="radio" class="required" name="food" value="Salads">Salads <br><br> Which of the following colors do you like the most?<br> <input type="radio" class="required" name="color" value="red">Red <input type="radio" class="required" name="color" value="blue">Blue <input type="radio" class="required" name="color" value="yellow">Yellow <input type="submit" id="submit" class="invalid"> <span class="submit error"></span> </form>