自定義複選框（使用圖像代替複選框）

我正在創建自定義複選框。自定義複選框（使用圖像代替複選框）

我想顯示一個活動/非活動圖像來代替複選框。

如果需要，我僅限於使用JSF/Richfaces和Javascript。

我想避免使用JavaScript，但我唯一能找到的就是OpenFaces'o：selectBooleanCheckbox'標籤。

是否有人知道另一種方式，我可以做到這一點，而不訴諸於Javascript？

謝謝

來源

2011-01-25 Thomas Buckley

更容易和良好的JavaScript。

但無論如何，您可以使用兩個不同的圖像標籤在布爾條件下呈現並更改綁定的變量的值。

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

來源

2011-01-25 16:12:55 niksvp

我還沒有得到周圍還沒有實現這個變化，但有一個快看，這似乎是最好的解決辦法，我會記住這當我得到它的工作的答案...不要擔心;）謝謝niksvp。這是相當整潔的jQuery功能sushil，不適合這個項目我害怕...我相信我會在未來用它來做其他事情。 – 2011-02-01 09:17:35

這項工作？

內部HTML

<a href="#" onclick="changeMySrc(1)" onMouseover="change_img()" onMouseout="change_back()"><img id="Img1" src="Images/unchecked.gif" /></a>

JavaScript函數

function changeMySrc(i) { 
    if (i == 1) { 
     var currentImg = document.getElementById("Img1").src; 
     if(currentImg.indexOf("unchecked") > 0) 
     { 
      document.getElementById("Img1").src="Images/checked.gif"; 
     } else { 
      document.getElementById("Img1").src="Images/unchecked.gif"; 
     } 
    } else if (i == 2) { 
     var currentImg = document.getElementById("Img2").src; 
     if(currentImg.indexOf("unchecked") > 0) 
     { 
      document.getElementById("Img2").src="Images/checked.gif"; 
     } else { 
      document.getElementById("Img2").src="Images/unchecked.gif"; 
     } 
    } 
}

來源

2011-01-25 15:57:45

雖然從你正在尋找，但認爲提到它http://jqueryui.com/demos/button/#checkbox jQuery UI的只是增加新的按鈕控件的東西有點不同的解決方案。

來源

2011-01-25 16:00:42

自定義複選框（使用圖像代替複選框）

回答

相關問題