Xác thực nhóm nút radio động trong jQuery

Question

Cách tốt nhất để xác thực để đảm bảo ít nhất một trong mỗi nhóm được chọn, vì vậy trong các nhóm mẫu sau đây là name1, name2, name3?

Ví dụ

<input type="radio" name="name1"> 
<input type="radio" name="name1"> 
<input type="radio" name="name1"> 

<input type="radio" name="name2"> 
<input type="radio" name="name2"> 
<input type="radio" name="name2"> 

<input type="radio" name="name3"> 
<input type="radio" name="name3"> 
<input type="radio" name="name3"> 

Tôi biết tôi có thể quấn một div xung quanh mỗi một và sau đó kiểm tra mỗi nút radio trong div, nhưng tôi đang tìm kiếm một giải pháp năng động hơn. Vì vậy, nếu trong tương lai nhiều nút radio được thêm vào, mã jQuery sẽ không cần phải được thay đổi hoặc các div sẽ không cần phải được thêm vào - tôi hy vọng điều này có ý nghĩa.

Answer 1

Bạn nên sử dụng jquery.validate.js thư viện để giúp bạn giải quyết câu hỏi này, hãy kiểm tra của họ demo

Nếu bạn sử dụng thư viện nó sẽ là đơn giản như,

<input type="radio" name="name1" validate="required:true"> 
<input type="radio" name="name1"> 
<input type="radio" name="name1"> 

<input type="radio" name="name2" validate="required:true"> 
<input type="radio" name="name2"> 
<input type="radio" name="name2"> 

Kiểm tra các jFiddle: Đây tìm thấy tất cả các tên khác nhau cho các nút radio và sau đó chạy qua tất cả các nhóm khác nhau và đảm bảo rằng có ít nhất một kiểm tra, nếu không nó sẽ ném một cảnh báo.

$('#button').click(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 2

$('[name="name1"]:checked').length != 0 

Hoặc

$('[name="name1"]').is(':checked') 

Bạn cũng có thể làm điều gì đó một chút năng động hơn nếu bạn thích:

var i = 1; 
while ($('[name="name'+i+'"]').length != 0) { 
    if ($('[name="name'+i+'"]').is(':checked')) { 
     // at least one is checked in this group 
    } else { 
     // none are checked 
    } 
    i++; 
}