カスタムチェックボックス（チェックボックスの代わりに画像を使用）

Question

私はカスタムチェックボックスを作成します。

チェックボックスの代わりにアクティブ/非アクティブの画像を表示したいとします。

私は、必要に応じてJSF/RichfacesとJavascriptを使用することに限定しています。

私はjavascriptの使用を避けたかったが、唯一見つけられるのはOpenFacesの「o：selectBooleanCheckbox」タグだった。

私はJavascriptに頼らないでこれを行うことができる別の方法を知っていますか？

ありがとうございました

Answer 1

もっと簡単で良いのはjavascriptです。

しかし、いずれにしても、ブール条件で2つの異なるイメージタグレンダリングを使用し、バインドする変数の値を変更することでそれを行うことができます。

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

Answer 2

これは機能しますか？

インサイド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"; 
     } 
    } 
} 

Answer 3

あなたが探しているものとは少し異なるソリューションけれども、それにhttp://jqueryui.com/demos/button/#checkbox jQueryのUIを言及するという考えは、単に新しいボタンウィジェットを追加しました。