Le blog du pangolin

Accueil > Programmation > javascript > jQuery - gestion des checkbox et des radios

jQuery - gestion des checkbox et des radios

mercredi 23 février 2011, par Super Pangolin

Les boutons radio

<input type="radio" name="test_radio" id="JQUERY_OUI" value="1" />
        <label for="JQUERY_OUI">OUI</label>
<input type="radio" name="test_radio" id="JQUERY_NON" value="0" />
        <label for="JQUERY_NON">NON</label>




Détecter un changement d’état :

$("[name='test_radio']").change(function(){
        alert('Changé');
});

Connaître la valeur cochée :




$("[name='test_radio']").change(function(){
       alert("Oui : "+$("#JQUERY_OUI").is(":checked"));
       alert($("Non : "+"#JQUERY_NON").is(":checked"));
});

Autre méthode :




$("[name='test_radio']").change(function(){
        alert($("input[name='test_radio']:checked").val());
});

Les checkbox

<input type="checkbox" name="check_test" id="check_test1" value="1" /><label for="check_test1">Checkbox 1</label> <br />
<input type="checkbox" name="check_test" id="check_test2" value="2" /><label for="check_test2">Checkbox 2</label> <br />
<input type="checkbox" name="check_test" id="check_test3" value="3" /><label for="check_test3">Checkbox 3</label> <br />
<input type="checkbox" name="check_test" id="check_test4" value="4" /><label for="check_test4">Checkbox 4</label> <br />





$("[name='check_test']").change(function(){
        var cochees = "";
        $("input[name='check_test']:checked").each(function(){
                cochees += " "+$(this).val();
        })
        alert(cochees);
});

Cocher / décocher les cases


 

Fonctions correspondant aux boutons :

function decocher(){
        $("input[name='check_test']:checked").each(function(){
                $(this).attr('checked', false);
        })
}
function cocher(){
        $("input[name='check_test']").not(":checked").each(function(){
                $(this).attr('checked', true);
        })
}

Explications :
Sélectionner les cases cochées

$("input[name='check_test']:checked")

et décochées :

$("input[name='check_test']").not(":checked")

puis, pour les cocher / décocher, on modifie l’attribut checked.

.attr('checked', true);

Messages

  • bonjour
    je recherche une solution pour cocher de tel case a tel case...
    je coche une premiere case dans une liste, ensuite, j en coche une autre en maintenant une touche du clavier, (Alt)
    et que cela coche ( ou decoche ) toutes les cases situés entre elles, ainsi que ces dernieres.
    C est un truc tres rependu, mais j ai beau chercher, je n arrive pas a trouver, certainement parce que j explique pas tres bien.
    Merci

  • Bonjour,
    J’ai un petit soucis de jquery, peut être pourriez vous m’éclairer

    J’ai plusieurs groupes de cases a cocher 1 parent et plusieurs enfants par groupe
    j’aimerais, si possible pouvoir tout cocher en cas de parent coché mais aussi si je coche un enfant, ca me coche le parent correspondant
    Jusqu’ici j’ai reussi à le faire mais il me manque un cas que je n’arrive pas à régler
    Supposons que j’ai coché deux cases enfants (case parent donc cochée) et que je décoche une case enfant, il faudrait que la case parent reste cochée jusqu’a ce que aucune enfant ne soit cochée

    Je vous remercie pour votre aide

    Cordialement

    Armand

Un message, un commentaire ?

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.