jQuery checkbox script as facebook invite friends window

I'm looking for a jQuery script or idea on how to create a similar window to the one facebook uses when you invite friends to an event.

开发者_如何学JAVASo basically a dialog window that has a list of people inside and when you select your friends it changes the background color and checks the checkbox of that friend so when they submit the form I can collect the data.

Thanks,

---

How about something like this? Oversimplified, but this should get the point across...

Markup:

<div class="member">
     <span class="member_name">Mike</span>
     <input type="checkbox" class="member_checkbox" />
     <input type="hidden" value="002" class="member_id" />
</div>

Member Select javascript:

// .member-selected would set a new background color
$(".member").click(function() {

     $(this).addClass("member-selected");

     // Find the checkbox
     var checkbox = $(this).find('.member_checkbox');

     // If the checkbox is checked, uncheck it, and
     // if it's not, then check it
     if( $(checkbox).attr("checked") != true) {
          $(checkbox).attr("checked", true);
     } else {
          $(checkbox).attr("checked" false);
     }

});

Form submission javascript:

// Create an array to hold ID numbers to submit
var add_members = [];

$(".member").each(function() {

     if( $(this).find('.member_checkbox').is(":checked") ) {

          add_members.push( $(this).find('.member_id').val() );

     }
});

You would end up with an array of member IDs that you could then post using AJAX.

** EDIT **

In the click function (see above) there should be additional lines that check or uncheck the checkbox based on its current state.

---

EDIT: I made a JSBIN out of Mike's suggestion. May help you solve your problem. When a checkbox is clicked its class is alerted then changed (member-selected is added or removed, I'm using toggleClass()) and then its class is alerted again. Check it out: jsbin.com/uxuxu3/4/edit

---

I don't know how facebook's 'invite friends to an event' window looks these days, but I believe you will find Facebox a similar modal. Check Facebox and other, perhaps even better options, at 19 jQuery Modal Boxes to improve your UI.