jQuery et groupes de boutons radio

Question

En jQuery, je souhaite sélectionner tous les groupes de boutons radio dans lesquels aucun bouton n'est coché.

Ou existe-t-il un moyen de sélectionner tous les groupes de boutons radio et de parcourir les groupes?

J'ajoute dynamiquement N groupes de boutons radio à une page et je ne saurai pas, à la main, quels seront les noms des groupes de boutons radio.

Answer 1

Pour trouver tous les groupes radio:

var radio_groups = {} 
$(":radio").each(function(){ 
    radio_groups[this.name] = true; 
}) 

pour trouver quel groupe radio a vérifié les boîtes de radio et qui n'a pas:

for(group in radio_groups){ 
    if_checked = !!$(":radio[name='"+group+"']:checked").length 
    alert(group+(if_checked?' has checked radios':' does not have checked radios')) 
} 

Answer 2

Prise en charge de plusieurs groupes et pré-cochées.

$('input').click(function() { 
    var $t = $(event.target); 
    if ($t.hasClass('checked')) $t.removeAttr('checked'); 
    else $('input[type="radio"][name="' + $t.prop('name') + '"]').not($t).removeClass('checked'); 
    $t.toggleClass('checked'); 
}).filter(':checked').addClass('checked');​ 

`` `

Preuve: http://jsfiddle.net/abrkn/PGW2Z/

Answer 3

Pour sélectionner toutes les radios par nom de groupe et obtenir uniquement la liste des noms différents:

function selectRadioByGroupName() { 
     return $.unique($('input:radio').map(function(index, element) { 
      return this.name; 
     })); 
    } 

Un exemple extrait:

function selectRadioByGroupName() { 
 
    return $.unique($('input:radio').map(function(index, element) { 
 
    return this.name; 
 
    })); 
 
} 
 

 

 

 
$(function() { 
 
    selectRadioByGroupName().each(function(index, element) { 
 
    $('body').append($('<p>First Group name is: ' + element + '</p>')); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<form action=""> 
 
    <p> 
 
     Q1: 
 
    </p> 
 
    <input type="radio" name="gender" value="male"> Male<br> 
 
    <input type="radio" name="gender" value="female"> Female<br> 
 
    <input type="radio" name="gender" value="other"> Other 
 
    <br /> 
 
    <p> 
 
     Q2: 
 
    </p> 
 
    <input type="radio" name="status" value="male"> Single<br> 
 
    <input type="radio" name="status" value="female"> Married<br> 
 
    <input type="radio" name="status" value="other"> Other 
 
    <br /> 
 
    <input type="button" name="submit_id" value="Submit" onclick="submitAnswers()"> 
 
</form>

Après avoir obtenu les différents noms de groupes, il est possible de les faire défiler.