如何使圖像表現得像<p:selectBooleanCheckbox>在 Primefaces 中？

Question

我正在嘗試將<p:panelGrid> <p:selectBooleanCheckbox>的樣式更改為一個可檢查的圖像，如本例中所示，我的問題是如何選擇正確的 CSS 類來使用我的新樣式修改 Primefaces 組件的樣式因為在瀏覽器的 HTML 輸出中我發現了很多 CSS 類

我的 CSS 樣式：

.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);

}

這是 HTML 輸出，所以我應該在我的 CSS 樣式中選擇這些類中的哪一個，所有我需要的Hover ，如果圖像以及何時檢查圖像的默認狀態。

<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>

如果需要，這是我在 XHTML 文件中的示例：

<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

我找到了解決方案：起初，普通 JSF 組件的樣式比 Primefaces 組件更容易，這意味着使用<h:XXX>而不是<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>

瀏覽器中的 HTML 輸出非常簡單：

<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

我不知道你想如何表明圖像（復選框）被選中，但我做了紅色邊框，所以從這個例子中我希望你能進一步工作。

面板網格

<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>

樣式

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

腳本

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