Displaying boolean values as images

Question

I want to display boolean values as images.

I have a checkbox in a table, if it is checked it should display a tick mark image and if it isn't checked it should display a cross image.

Answer 1

Simplistically, you can do something like:

<apex:image URL="{!if(checked,"/img/checked.gif","/img/unchecked.gif")}/>

Where each icon represents a checked or unchecked box. The exact URL will differ, but the concept remains. There is a default checked and unchecked box, or you could use one of your own choosing by using static resources.

Answer 2

If you've got images to use then the other two answers will fit the bill nicely... an alternative though (to avoid a regular checkbox) could be to use unicode characters for the job, and you could adjust the font size and colour accordingly.

<apex:outputText value="{!IF(checked, '✔', '✘')}"/>

Answer 3

If you'd like to do this in a standard page layout (ie. without using the otherwise perfect visualforce example by sfdcfox) you can use a Formula field to output images based on other field values as you can see in the documentation on advanced formula fields here.

As an example for your request, a formula field something like

IF( checked__c, 
IMAGE("/img/checked.gif", "Checked"),
IMAGE("/img/unchecked.gif", "Not Checked")
)

Would put an image field on the standard view page for your object.

Answer 4

Another option is to output the HTML code directly:

<apex:outputText rendered="{!NOT(checked__c)}">&#9744;</apex:outputText>
<apex:outputText rendered="{!checked__c}">&#9745;</apex:outputText>