jQuery的复选框，脚本如Facebook邀请朋友窗口

Question

我正在寻找如何创建一个类似窗口的一个Facebook的一个jQuery脚本或想法使用。

所以基本上有内部人的名单，当你选择你的朋友它改变了背景颜色，并检查该朋友的复选框，因此，当他们提交表单我可以收集数据的对话窗口。

谢谢，

Answer 1

这样的事情呢？过于简单，但这应该得到整个点...

标记：

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

会员选择的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); 
    } 

}); 

表单提交的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()); 

    } 
}); 

您将结束随后可以使用AJAX发布一系列会员ID。

**编辑**

在点击功能（见上文）存在应该是选择或取消选择基于其当前状态的复选框附加线路。

Answer 2

编辑：我做了一个JSBIN出迈克的建议。可以帮助你解决你的问题。当一个复选框被点击时，它的类会被提醒然后被更改（成员选择被添加或删除，我正在使用toggleClass（）），然后再次提醒它的类。检查出来：jsbin.com/uxuxu3/4/edit

---

我不知道Facebook的如何“邀请好友事件”窗口看起来这些天，但我相信你会发现Facebox类似的模式。在19 jQuery Modal Boxes to improve your UI上检查Facebox和其他，甚至更好的选项。