Question

我正在寻找创建自定义复选框。

我想显示一个活动/非活动图像来代替复选框。

如果需要，我只能使用JSF / Richfaces和Javascript。

我想避免使用javascript，但我唯一能找到的是OpenFaces'o：selectBooleanCheckbox'标签。

是否有人知道我可以采用另一种方式而不依赖Javascript？

由于

Answer 1

更容易和更好的是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>

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刚刚添加了新的按钮小部件。

自定义复选框（使用图像代替复选框）

3 个答案: