Bonjour,

Sur une page de profil utilisateur, je propose de pouvoir changer d'avatar. Lorsque la page s'ouvre (c'est en fait une fenêtre modal), je voudrais que le bouton radio de l'avatar actuel de l'utilisateur soit cocher. Je peux facilement récupérer la value dans la page mère mais je n'arrive pas à checker le bouton et j'ai cette erreur

Error: Syntax error, unrecognized expression: input[name=radiosProfil][value=femme.png]

Voici mon code correspondant

Le HTML

<div class="form-group choixAvatar">
    <label class="col-sm-4 control-label" for="radiosProfil">Avatar</label>
    <div class="col-sm-8 col-sm-offset-2">
        <label class="radio-inline" for="radiosProfil-0">
            <input name="radiosProfil" id="radiosProfil-0" value="vielle.png" type="radio">
            <img src="/avatar/vielle.png" alt="Femme mûre" title="Femme mûre">
        </label>
        <label class="radio-inline" for="radiosProfil-1">
            <input name="radiosProfil" id="radiosProfil-1" value="vieux-1.png" type="radio">
            <img src="/avatar/vieux-1.png" alt="Homme mur" title="Homme mur">
        </label>
        <label class="radio-inline" for="radiosProfil-2">
            <input name="radiosProfil" id="radiosProfil-2" value="femme.png" type="radio">
            <img src="/avatar/femme.png" alt="Femme" title="Femme">
        </label>
        <label class="radio-inline" for="radiosProfil-3">
            <input name="radiosProfil" id="radiosProfil-3" value="homme.png" type="radio">
            <img src="/avatar/homme.png" alt="Homme" title="Homme">
        </label>
        <label class="radio-inline" for="radiosProfil-4">
            <input name="radiosProfil" id="radiosProfil-4" value="adoFille.png" type="radio">
            <img src="/avatar/adoFille.png" alt="Fille ado" title="Fille ado">
        </label>
        <label class="radio-inline" for="radiosProfil-5">
            <input name="radiosProfil" id="radiosProfil-5" value="adoGarcon.png" type="radio">
            <img src="/avatar/adoGarcon.png" alt="Garçon ado" title="Garçon ado">
        </label>
        <label class="radio-inline" for="radiosProfil-6">
            <input name="radiosProfil" id="radiosProfil-6" value="fille.png" type="radio">
            <img src="/avatar/fille.png" alt="Fille" title="Fille">
        </label>
        <label class="radio-inline" for="radiosProfil-7">
            <input name="radiosProfil" id="radiosProfil-7" value="garcon.png" type="radio">
            <img src="/avatar/garcon.png" alt="Garçon" title="Garçon">
        </label>
    </div>
</div>

le Jquery

function prive(name) {
    var user = $('.pseudoNew').val();
    var avatar = $('#ava').val();
    $('#profil').modal('show');
    $('#pseudoProfil').val(user);
    $('input[name=radiosProfil][value='+avatar+']').attr('checked', true);
} 

Pouvez vous m'aider à comprendre ou est mon erreur ?

Merci de votre aide

-
Edité par florianboy01 10 octobre 2018 à 22:18:32

Salut,

Il me semble qu'il te manque des guillemets à "radiosProfil" à la fin de ta fonction. Ca pourrait venir de ça 

Le problème pourrait aussi être que tu utilises des guillemets simples à l'intérieur d'autres guillemets simples. Essaie peut-être d'alterner avec des doubles pour faciliter la tâche à jQuery. Exemple: $("input[name='radiosProfil'][value='+avatar+']").

Re,

Je te remercie de ton aide qui m'a bien mis sur la voie

J'ai testé avec

$('input[name=radiosProfil][value="'+avatar+'"]').attr('checked', true);

puis avec

$('input[name="radiosProfil"][value="'+avatar+'"]').attr('checked', true);

et dans les deux cas, cela a l'air de fonctionner.

Alors, doit-on toujours mettre des guillemets autour des valeurs des attributs ?

Car même en ciblant le input sans [name="radiosProfil"], cela fonctionne aussi.

Et quelle est la meilleur methode, enfin, la façon la plus correct de l'écrire ?

Bonsoir,

Personne pour me dire quelle est la syntaxe la plus propre pour écrire cette ligne

$('input[name="radiosProfil"][value="'+avatar+'"]').attr('checked', true);

// ou

$('input[name=radiosProfil][value="'+avatar+'"]').attr('checked', true);

// ou

$('input[value="'+avatar+'"]').attr('checked', true);

Les trois fonctionnent mais laquelle est la plus propre ?

Merci

Bonjour florianboy01 ,

tu ne pourrais pas aussi faire  :

$('input[name="radiosProfil"][value="'+avatar+'"]:checked') 

Bonjour,

Je viens de tester mais à priori, cela ne fonctionne pas mais merci pour ta suggestion.

Bonjour florianboy01 ,

C'est moi qui te dis des bêtises, désolé!

Toi tu veux checker l'input

et moi je te donnes un truc pour sélectionner un input checked

C'est pas grave, merci qu'en même !!

Mais d'après toi, parmi les trois syntaxe que j'ai mis plus haut, laquelle est la plus "conventionnelle" ?

Je pense que la première est la mieux mais j'aurai aimé avoir l'avis d'expert ...