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和其他，甚至更好的選項。