Search code examples
javascriptcssjsfcheckboxrichfaces

Custom checkbox (Use images in place of checkbox)

I'm looking to create a custom checkbox.

I would like to display an active/inactive image in place of the checkbox.

I'm limited to using JSF/Richfaces and Javascript if necessary.

I wanted to avoid using javascript but the only thing I could find was OpenFaces 'o:selectBooleanCheckbox' tag.

Is anyone aware of another way I could do this without resorting to Javascript?

Thanks

Solution

  • Easier and good would be javascript.

    But anyways you can do it using two different image tag rendering on a boolean condition and changing the value of the variable you bind.

    <a4j:outputPanel id="checkbox">
    <h:graphicImage value="path/checkedimage" rendered="#{yourbean.value}">
       <a4j:support event="onclick" action="#{yourbean.ChangeValue}" reRender="checkbox"/>
    </h:graphicImage>
    <h:graphicImage value="path/uncheckedimage" rendered="#{not yourbean.value}">
       <a4j:support event="onclick" action="#{yourbean.ChangeValue}" reRender="checkbox"/>
    </h:graphicImage>
</a4j:outputPanel>