First, the generic CSS and JavaScript part. In my test case I put the following code in the page header. If something like this goes production, it should be in separate files, of course:
<style type="text/css">
.js_checkbox { display:none; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
function set_yn(i_checkbox,i_apex_field_id) {
document.getElementById(i_apex_field_id).value =
(i_checkbox.checked? "Y" : "N");
}
$().ready(function() {
$(".js_checkbox").each(function() {
$(this).after("<input id='"+this.id+"_js' type='checkbox' "+
(this.value==="Y" ? "checked='checked' " : "") +
"onchange='javascript:set_yn(this,"+'"'+this.id+'"'+")'/>");
});
});
</script>
Second, the column definition:
* Display As: Text Field (the default)
* Element Attributes: class="js_checkbox"
Please note that this code is just a quick hack in response to Patrick's topic, not thoroughly tested etc.