How to make an image behave like <p:selectBooleanCheckbox> in Primefaces?

Question

I am trying to change the style of a <p:selectBooleanCheckbox> in <p:panelGrid> to a checkable image like in this exemple, my problem is how to choose the right CSS classes to modify the style the Primefaces component with my new style because in the HTML output in the browser I found many CSS classes

my CSS style:

.checkimage{
display:none;
}

.checkimage + label{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: absolute;  
}

.checkimage + label img{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.4;
    filter: alpha(opacity=40);
    height: 100px;
    width: 100px;
    display:block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid;
    border-radius: 0.75em;
}
.checkimage + label:hover img{
    -webkit-filter: grayscale(65%);
    filter: grayscale(65%);
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.checkimage:checked + label img{ 
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1.0;
    filter: alpha(opacity=100);

}

This is the HTML output, so which of these classes should I choose in my CSS style, all what I need the Hover, the default status if the image and when the image is checked.

<div id="j_idt10:id1" class="ui-chkbox ui-widget checkimage">
        <div class="ui-helper-hidden-accessible">
            <input id="j_idt10:id1_input" name="j_idt10:id1_input"
                type="checkbox" aria-checked="false" />
        </div>

        <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
            <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span>
        </div>

</div>


<label id="j_idt10:j_idt56" class="ui-outputlabel ui-widget" for="j_idt10:id1_input"> check one

     <img id="j_idt10:j_idt57" src="images/img1.jpg?pfdrid_c=true" alt="" />

</label>

And this my example in the XHTML file if it's needed :

<p:panelGrid>   
        <p:selectBooleanCheckbox styleClass="checkimage" id="id1" />
                <p:outputLabel for="id1" value="check one" >
                        <p:graphicImage for="id1"  url="images/img1.jpg"/> 
                </p:outputLabel>

        <p:selectBooleanCheckbox styleClass="checkimage" id="id2" />
                <p:outputLabel for="id2" value="check two" >
                        <p:graphicImage for="id2"  url="images/img2.jpg"/> 
                </p:outputLabel>

        <p:selectBooleanCheckbox styleClass="checkimage" id="id3" />
                <p:outputLabel for="id3" value="check three" >
                        <p:graphicImage for="id3"  url="images/img3.jpg"/> 
                </p:outputLabel>

</p:panelGrid>

Answer 1

I found the solution : At first, the styling of the normal JSF Components is more easy than the Primefaces components, it means that the using of <h:XXX> instead of <p:XXX>.

<h:panelGrid>   
        <h:selectBooleanCheckbox styleClass="checkimage" id="id1" />
                <h:outputLabel for="id1" value="check one" >
                        <p:graphicImage for="id1"  url="images/img1.jpg"/> 
                </h:outputLabel>

        <h:selectBooleanCheckbox styleClass="checkimage" id="id2" />
                <h:outputLabel for="id2" value="check two" >
                        <p:graphicImage for="id2"  url="images/img2.jpg"/> 
                </h:outputLabel>

        <h:selectBooleanCheckbox styleClass="checkimage" id="id3" />
                <h:outputLabel for="id3" value="check three" >
                        <p:graphicImage for="id3"  url="images/img3.jpg"/> 
                </h:outputLabel>

</h:panelGrid>

and the HTML output int the browser is very simple :

<input id="j_idt9:id1" name="j_idt9:id1" checked="checked" class="checkimage" type="checkbox">

<label for="j_idt9:id1">check one
      <img id="j_idt9:j_idt57" src="images/img1.jpg?pfdrid_c=true" alt="">
</label>

Answer 2

I don't know how do you want to indicate that image (checkbox) is checked but I did red border so from this example I hope you can work further.

panelGrid

<p:panelGrid>   
    <p:row>
        <p:column styleClass="radioColumn">
            <p:selectBooleanCheckbox styleClass="myRadio" id="id1" />
            <p:outputLabel for="id1" value="check one" >
                <p:graphicImage width="50" height="50" name="img/image1.png"/> 
            </p:outputLabel>
        </p:column>
        <p:column styleClass="radioColumn">
            <p:selectBooleanCheckbox styleClass="myRadio" id="id2"/>
            <p:outputLabel for="id2" value="check two" >
                <p:graphicImage width="50" height="50" name="img/image2.png"/> 
            </p:outputLabel>
        </p:column>
        <p:column styleClass="radioColumn">
            <p:selectBooleanCheckbox styleClass="myRadio" id="id3" />
            <p:outputLabel for="id3" value="check three" >
                <p:graphicImage width="50" height="50" name="img/image3.png"/> 
            </p:outputLabel>
        </p:column>
    </p:row>
</p:panelGrid>

styles

.myRadio {
    display:none;
}
.myRadio + label img{
    display:block;
    margin-left: auto;
    margin-right: auto;
}
.highlighted {
    border: 1px solid;
    border-color: red;
}

script

$(document).on("change", ".myRadio input", function () {
    $(this).closest(".radioColumn").find("img").toggleClass("highlighted");
});