Implement a multi-selection behavior on a list of checkboxes in a form using jQuery.

Question

In a form, we have at least two lists of checkboxes, and we want to apply a multi-selection behavior to each of them. In addition, for an enhanced user experience, a CSS style is applied to the label of each checkbox depending on whether it is checked or not and whether it has focus or not. Which of the following practices is the most efficient and is to be preferred to implement this specification?

Accepted Answer

We previously place in html on each of the `checkbox` type tags of the first list a `name="liste1"` attribute and an on `click="set_click(index)"` attribute with an `id="lid(index)"` and we add on the associated labels an attribute `name="label1"` and an `id="lbid(index)"`(the choice of names is arbitrary).

Then apply the following code:
```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

Another method.

Question from the jQuery test

Implement a multi-selection behavior on a list of checkboxes in a form using jQuery.