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

Question

我正在處理表單，並且有一個用於驗證無線電字段的代碼。 但是，我計划有許多個無線電字段，並且我覺得當前的方法（分別命名每個無線電字段）有點乏味。 我覺得必須有一種方法可以簡單地選擇所有它們，以確保在處理表單之前已對所有它們進行了檢查。

這是我的jsFiddle

當前的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

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

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

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

//Do stuff

} else {

//Do other stuff

}
});

對於第二個，我試圖查看是否可以向所有單選字段添加必填類，然后查看是否未選中/未定義任何.required單選按鈕。 我覺得必須有一種方法可以解決這個問題。 我在正確的軌道上嗎？ 我覺得我只是沒有選擇這個權利。

Answer 1

我已經更新了您的小提琴 ，請檢查！ 希望它能解決您的問題。

您可以在下面測試代碼段。 這是我修改的部分：

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

您可以遍歷所有具有名稱屬性:radio[name]的單選按鈕，並結合一個數組（例如， examined ，以幫助您跳過已經檢查的按鈕。 無論表單中有多少組單選按鈕，此方法都應該起作用。

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