J’ai eu hier une question sur la manipulation des éléments radio en Javascript. La personne voulait vérifier que pour chacun de ses groupes de radio, au moins un radio était sélectionné.

Plusieurs solutions en Javascript “pur” existent sur Internet mais aucune ne semblait simple à appliquer par cette personne. Je propose donc ici quelques snippets jQuery pour exploiter simplement les éléments Radio.

Nous partirons donc d’une page incluant la librairie jQuery et le code XHTML suivant :

<form action="?" method="get" id="monForm">
<input type="radio" name="opt1" value="1" checked="checked" />
<input type="radio" name="opt1" value="2" />
<input type="radio" name="opt1" value="3"/>

<input type="radio" name="opt2" value="1" />
<input type="radio" name="opt2" value="2" checked="checked" />
<input type="radio" name="opt2" value="3" />

<input type="radio" name="opt3" value="1" checked="checked" />
<input type="radio" name="opt3" value="2" />
<input type="radio" name="opt3" value="3"/>
</form>

Accéder aux inputs de type radio en jQuery

Il existe plusieurs façon d’accéder aux inputs de type radio en jQuery, j’ai réalisé quelques tests afin de définir quelles expressions étaient les plus rapides :

Récupérer tous les inputs radios appartenant à un même groupe

$('input[type=radio][name=opt1]');//ici retourne 3 éléments input

Connaître si un groupe de radio à une valeur

$('input[type=radio][name=opt1]:checked').length; // Doit être égal à 1 si un radio à été sélectionné dans le groupe de opt1.

Vérifier que tous les radios ont été sélectionnés

$('input[type=radio]:checked').length; // Si au moins un radio est sélectionné pour chaque groupe, ce snippet retourne 3 (dans notre exemple)

Récupérer la valeur d’un groupe de radio

$('input[type=radio][name=opt1]:checked').attr('value'); //Retourne la valeur du radio sélectionné dans le groupe opt1. Retourne vide si aucun radio sélectionné

Etant en train de développer un addon pour Firefox/Firebug qui aidera plus d’un développeur (en tout cas moi) j’ai eu besoin de connaitre le fontFamily d’un élément. Dans cet article je ne traiterai donc que de la façon de récupérer un fontFamily. Cependant la récupération d’autres propriétés CSS (via une fonction générique par exemple) est tout à fait possible.

 

Si le fontFamily a directement été défini (in-line) sur l’élément

<span id='monEl' style='font-family:Tahoma'>Javascript</span>

... alors un simple :

document.getElementById('monEl').style.fontFamily;

ou

$('#monEl').css('fontFamily');

... suffit pour récupérer la valeur de la propriété fontFamily de l’élément.

 

Maintenant si l’on supprime l’attribut style de notre span#monEl le code suivant retournera une chaine vide :

document.getElementById('monEl').style.fontFamily;//retourne ""

Cependant le code jQuery, lui, fonctionnera.

 

Arriver à nos fin sans jQuery

Au début je pensait qu’il suffirait d’effectuer une boucle sur les éléments parents du DOM : remonter à chaque fois d’un élément et dès qu’un élément a un fontFamily de valide, stopper la boucle et retourner sa valeur. Mais il y a beaucoup plus simple.

 

jQuery procède d’une façon différente. En regardant son code de plus près j’ai découvert qu’il avait recourt à la méthode DOM de niveau 2 getComputedStyle() pour récupérer la valeur d’un attribut CSS hérité d’un élément parent. Malheureusement cette méthode ne semble pas être intégré sous IE qui lui dispose de la propriété currentStyle.

 

Voici donc une fonction (basé sur le code utilisé par jQuery) qui retourne, pour un élément donné, la valeur du fontFamily associé :

function getFontFamily(el){
    var ret;
    if (el.style && el.style['fontFamily'])//Si l'élément a déjà la propriété de définie
        ret = el.style['fontFamily'];
    else if (document.defaultView.getComputedStyle){//Firefox, Opera
        var computedStyle = document.defaultView.getComputedStyle(el, null );

        if(computedStyle)
            ret = computedStyle.fontFamily;
    }
    else if (el.currentStyle)//Internet Explorer
        ret = el.currentStyle['fontFamily'];
    return ret;
}

Testé sous Firefox et Chrome.