Implémenter un comportement de sélection multiple sur une liste de cases à cocher dans un formulaire en utilisant jQuery.

Question

Dans un formulaire, on a au moins deux listes de checkboxes, et on souhaite appliquer à chacune d’elles un comportement multi sélection. De plus, pour une expérience utilisateur accrue, un style CSS est appliqué au label de chaque checkbox selon que celle-ci est cochée ou non et qu’elle a le focus ou non. Laquelle des pratiques suivantes est la plus performante et est à privilégier pour implémenter ce cahier des charges?

Accepted Answer

On place préalablement en html sur chacune des balises de type `checkbox` de la première liste un attribut `name="liste1"` et un attribut on `click="set_click(index)"` avec un attribut `id="lid(index)"` et on rajoute sur les labels associés un attribut `name="label1"` et un `id="lbid(index)"` (le choix des noms est arbitraire).

On applique ensuite le code suivant :
```javascript
function set_click(index){
    $("input[name=label1]").each(function(){$(this).removeClass("hasfocus");});
    var ischecked-$("#lid"+ index).attr("checked");
    if (ischecked=="checked"){
        $("#lid"+index)
            .removeAttr("checked").focus();
        $("#lbid"+ index)
            .removeclass("selectedbox").addClass("hasfocus");
    }else{
       $("#lid"+ index)
           .attr("checked","checked").focus();
       $("#lbid"+ index)
           .removeClass("hasfocus").addClass("selectedbox");
    }
}

```

Answer

```javascript
$(":checkbox").click(function(){
    if (!$(":checkbox").not(this).attr("checked")){
        $(this:first-child)
            .removeClass("selectedbox hasfocus")
            .addClass("unselectedbox");
    }else{
        $(this:first-child)
            .removeClass("unselectedbox")
            .addClass("selectedbox hasfocus");
    }
});
```

Answer

Une autre méthode.

Question du test jQuery

Implémenter un comportement de sélection multiple sur une liste de cases à cocher dans un formulaire en utilisant jQuery.