如何驗證多個單選按鈕

Question

如何驗證多個單選按鈕。所有這些單選按鈕動態生成。

<input type="radio" name="answer_option1" value="1" id="ans_options1" /> 
<input type="radio" name="answer_option1" value="2" id="ans_options2" /> 
<input type="radio" name="answer_option1" value="3" id="ans_options3" /> 
<input type="radio" name="answer_option1" value="4" id="ans_options4" /> 

<input type="radio" name="answer_option2" value="5" id="ans_options5" /> 
<input type="radio" name="answer_option2" value="6" id="ans_options6" /> 
<input type="radio" name="answer_option2" value="7" id="ans_options7" /> 
<input type="radio" name="answer_option2" value="8" id="ans_options8" /> 

<input type="radio" name="answer_option3" value="9" id="ans_options9" /> 
<input type="radio" name="answer_option3" value="10" id="ans_options10" /> 
<input type="radio" name="answer_option3" value="11" id="ans_options11" /> 
<input type="radio" name="answer_option3" value="12" id="ans_options12" /> 

<input type="radio" name="answer_option4" value="13" id="ans_options13" /> 
<input type="radio" name="answer_option4" value="14" id="ans_options14" /> 
<input type="radio" name="answer_option4" value="15" id="ans_options15" /> 
<input type="radio" name="answer_option4" value="16" id="ans_options16" /> 

Answer 1

試試這個http://jsfiddle.net/aamir/r9qR2/

由於每個組都有不同的名稱屬性，所以你必須爲每個組單選按鈕做驗證。

if($('input[name="answer_option1"]:checked').length === 0) { 
    alert('Please select one option'); 
} 

如果您有無限個組數。試試這個http://jsfiddle.net/aamir/r9qR2/2/

//Make groups 
    var names = [] 
    $('input:radio').each(function() { 
     var rname = $(this).attr('name'); 
     if ($.inArray(rname, names) == -1) names.push(rname); 
    }); 

    //do validation for each group 
    $.each(names, function (i, name) { 
     if ($('input[name="' + name + '"]:checked').length == 0) { 
      console.log('Please check ' + name); 
     } 
    }); 

如果你想顯示所有組只有1個錯誤。試試這個http://jsfiddle.net/aamir/r9qR2/4/

Answer 2

嘗試這種新的撥弄你想如果選擇了單選按鈕，檢查http://jsfiddle.net/Hgpa9/3/

$(document).on("click","#validate", function() { 
var names = []; 

    $('input[type="radio"]').each(function() { 
     // Creates an array with the names of all the different checkbox group. 
     names[$(this).attr('name')] = true; 
    }); 

    // Goes through all the names and make sure there's at least one checked. 
    for (name in names) { 
     var radio_buttons = $("input[name='" + name + "']"); 
     if (radio_buttons.filter(':checked').length == 0) { 
      alert('none checked in ' + name); 
     } 
     else { 
      // If you need to use the result you can do so without 
      // another (costly) jQuery selector call: 
      var val = radio_buttons.val(); 
     } 
    } 
}); 

Answer 3

var names = [] 
$('input[name^="answer_option"]').each(function() { 
    var rname = $(this).attr('name'); 
    if ($.inArray(rname, names) == -1) names.push(rname); 
}); 

$.each(names, function (i, name) { 
    if ($('input[name="' + name + '"]:checked').length == 0) { 
     console.log('Please check ' + name); 
    } 
});