$(function() { //Default the checkbox list to contracted/hidden on load $('#CheckboxList').hide(); //Show the dropdown region $('#Jobs-Dropdown-JS').show(); //Toggle visibilty of the 'dropdown' when selectedItems is clicked $('#SelectedItems').click(function(event) { $('#CheckboxList').toggle(); /*slideToggle();*/ event.stopPropagation(); }); //Hide the 'dropdown' when user clicks outside its area $('body').click(function(event) { $('#CheckboxList').hide(); }); //Prevent a click inside the 'dropdown' from propogating to where it would // be counted as a click outside the bounds $('#CheckboxList').click(function(event) { event.stopPropagation(); }); //'Show all' should click all checkboxes in the list $('#CheckboxList ul li:first input:checkbox').click(function(event) { $(event.target).closest('li').siblings().find("input:checkbox").attr("checked", $(event.target).attr("checked")); }); //Changing a checkbox value should update the selected items text $('#CheckboxList ul li input:checkbox').click(function(event) { updateSelectedItemsText(); }); //Look for an initial selection in the hidden field and make sure the corresponding // checkboxes are pre-selected var selectedBusinessAreasValueArray = new String($('input[id$=businessAreaSelection]').val()).split(";"); for (var valueIndex = 0; valueIndex < selectedBusinessAreasValueArray.length; valueIndex++) { if ("" != selectedBusinessAreasValueArray[valueIndex]) { //Find the checkbox with this value in the label $('#CheckboxList ul li label:contains(' + selectedBusinessAreasValueArray[valueIndex] + ')').siblings('input:checkbox').attr("checked", "true"); } } //On first load, only update the selected items text if there is more than one item selected if (0 < $('#CheckboxList ul li:gt(0) input:checked').length) { updateSelectedItemsText(); } //If all items selected then make sure that 'Select all' is also selected if ($('#CheckboxList ul li:gt(0) input:checked').length == $('#CheckboxList ul li:gt(0) input:checkbox').length) { $('#CheckboxList ul li:eq(0) input:checkbox').attr("checked", "true"); } }); ////////////////////////////////////////////////////////////////////////////////////////// //Update the displayed list of items and the hidden value containing the user's selection ////////////////////////////////////////////////////////////////////////////////////////// function updateSelectedItemsText() { var selectedBusinessAreasText = ""; //Text for display var selectedBusinessAreasValue = ""; //Value to post $('#CheckboxList ul li:gt(0) input:checked').each(function(index, item) { if (0 < index) { selectedBusinessAreasText += "," selectedBusinessAreasValue += ";"; } selectedBusinessAreasText = selectedBusinessAreasText + $(item).siblings('label').text(); selectedBusinessAreasValue = selectedBusinessAreasValue + $(item).siblings('label').text(); ; }); $('#SelectedItemsInner').text(selectedBusinessAreasText).attr("title", selectedBusinessAreasText); $('input[id$=businessAreaSelection]').val(selectedBusinessAreasValue); }