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

问题描述：

我正在创建自定义复选框。自定义复选框（使用图像代替复选框）

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

如果需要，我仅限于使用JSF/Richfaces和Javascript。

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

是否有人知道另一种方式，我可以做到这一点，而不诉诸于Javascript？

谢谢

答

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

我还没有得到周围还没有实现这个变化，但有一个快看，这似乎是最好的解决办法，我会记住这当我得到它的工作的答案...不要担心;）谢谢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"; 
     } 
    } 
}

答

虽然从你正在寻找，但认为提到它http://jqueryui.com/demos/button/#checkbox jQuery UI的只是增加新的按钮控件的东西有点不同的解决方案。

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

相关推荐