Mission: To convert a multi-select to a series of checkboxes. But submit the form as a multiselect.
<![CDATA[
$(document).ready(function(){
$("select[multiple]").each(function(){ //Loop over all multi-select boxes
$(this).wrap("<div class='selectWrap'></div>"); //wrap a div around it
$(this).children("option").each(function(){ //loop over the option tags
var curVal = $(this).attr("value"); //get value
var curText = $(this).text(); //get display name
if($(this).is(":selected")) { //if its selected
var curStatus = "checked='checked'"; //prep the checked for the insert
}
else {
var curStatus = ""; //not checked
}
if(typeof curVal != "undefined") { //if the current value isn't empty
var curCheckInsert = "<br /><input type='checkbox' id='" + curVal + "Check' " + curStatus + " value='" + curVal + "' /><label for='" + curVal + "Check'>" + curText + "</label>"; //insert the checkbox and label (uses for='' to make the text clickable)
}
$(this).parents("div").append(curCheckInsert); //do the actual insert
});
$(this).addClass("hidden").fadeTo("slow", 0.33); //hide the original select box
});
$("div.selectWrap input[type=checkbox]").click(function () { //add click handler to the new checkboxes
var checkVal = $(this).attr("value"); //Get the value to match with the selectbox
if($(this).is(":checked")) { //if its checked
$(this).siblings("select").children("option[value=" + checkVal + "]").attr("selected","selected"); //find the sibling select with the same value and make it selected
}
else { //not checked
$(this).siblings("select").children("option[value=" + checkVal + "]").removeAttr("selected"); //remove the selected
}
});
});
]]>