Here is the code.
<script language="JavaScript" src="/js/public/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
$jQ = jQuery.noConflict();
$jQ(document).ready(function(){
// replace all multi-select boxes with checkboxes
$jQ("select[multiple]").each(function(){
// firstwrap a div around it
$jQ(this).wrap("<div class='selectWrap'></div>");
// loop over the option tags, add checkboxes for each
$jQ(this).children("option").each(function(){
var curVal = $jQ(this).attr("value");
var curText = $jQ(this).text();
//if its selected prep the checked for the insert
if($jQ(this).is(":selected")) {
var curStatus = "checked='checked'";
} else {
var curStatus = "";
}
// if the current value isn't empty,
// insert the checkbox and label
// (uses for='' to make the text clickable)
if(typeof curVal != "undefined") {
var curCheckInsert = "<br /><label for='" +
curVal + "Check'>" + curText + "</label><input type='checkbox' id='" +
curVal + "Check' " + curStatus +
" value='" + curVal + "' />";
}
// add the checkbox to the new div
$jQ(this).parents("div.selectWrap").append(curCheckInsert);
});
//hide the original select box
$jQ(this).addClass("hidden").hide();
});
//add click handler to the new checkboxes
$jQ("div.selectWrap input[type=checkbox]").click(function () {
//Get the value to match with the selectbox
var checkVal = $jQ(this).attr("value");
//if checked, find the sibling select with the same value and make it selected
//otherwise, remove the selected attribute
if($jQ(this).is(":checked")) {
$jQ(this).siblings("select").children("option[value=" + checkVal + "]").attr("selected","selected");
} else {
$jQ(this).siblings("select").children("option[value=" + checkVal + "]").removeAttr("selected");
}
});
});
</script>