jQuery onclick change parent background

Question

I downloaded the script from emposha.com/javascript/fcbklistselection-like-facebook-friends-selector.html and made a few modifications, as the source wasn't working as required (When submitting the form, all of the values were being sent to the php handler, not just the checked ones).

My working example is in this Demo.

My issue is this: how can I check a group of <lis> so that I could have a 'Select All' button?

Answer 1

You can do it like this:

$("#fcbklist li input:checkbox").attr("checked", true);

Or if you want a toggle on that select all box that checks when it's checked, unchecks all when it's not, do this:

$("#selectAll").change(function() {
  $("#fcbklist li input:checkbox").attr("checked", this.checked);
});

To get the effect you want with the plugin though, you'll need to fire a click on the parent as well, like this:

$("#selectAll").change(function() {
  $("#fcbklist li input:checkbox").attr("checked",this.checked).parent().click();
});    ​

You can try a working sample here.