如何隱藏H：selectBooleanCheckbox

Question

我使用自定義的複選框想法

Ryan Fait's Idea

哪些地方可以使用自定義圖像，以創建自定義的複選框。但我無法使複選框消失，只是有常規框。實例的形象在這裏

這裏是我的代碼..

<div id="scheduleContainer"> 
     <table> 
     <tr> 
     <!--table header--> 
     </tr> 
     <tr> 
     <td>            
<h:selectBooleanCheckbox value="#{schedules[scheduleName][0]}" /><label> 12:00AM</label> 
</td> 

    </div> 

的CSS

#scheduleContainer .checkbox { 
    width: 25px; 
    height: 20px; 
    padding: 0px; 
    background: url(../img/schedule-check.gif) no-repeat; 
    display: none; 
    margin: 0px; 
    border: 1px solid black; 
    clear: left; 
    float: left; 
} 

還給出了裏面的js文件。我正確使用這個嗎？

/* 
CUSTOM CHECK BOXES - Derived from script by Ryan Fait at 
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ 
*/ 

var checkboxHeight = "20"; 

/* No need to change anything after this */ 


document.write('<style type="text/css">.styledGroup input { display: none; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>'); 

var Custom = { 
    init: function() { 
     var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active; 
     for(a = 0; a < inputs.length; a++) { 
      if(inputs[a].type == "checkbox") { 
       span[a] = document.createElement("span"); 
       span[a].className = inputs[a].type; 

       if(inputs[a].checked == true) { 
        position = "0 -" + (checkboxHeight*2) + "px"; 
        span[a].style.backgroundPosition = position; 
       } 
       inputs[a].parentNode.insertBefore(span[a], inputs[a]); 
       inputs[a].onchange = Custom.clear; 
       if(!inputs[a].getAttribute("disabled")) { 
        span[a].onmousedown = Custom.pushed; 
        span[a].onmouseup = Custom.check; 
       } else { 
        span[a].className = span[a].className += " disabled"; 
       } 
      } 
     } 
     document.onmouseup = Custom.clear; 
    }, 
    pushed: function() { 
     element = this.nextSibling; 
     if(element.checked == true && element.type == "checkbox") { 
      this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px"; 
     } else if(element.checked != true && element.type == "checkbox") { 
      this.style.backgroundPosition = "0 -" + checkboxHeight + "px"; 
     } 
    }, 
    check: function() { 
     element = this.nextSibling; 
     if(element.checked == true && element.type == "checkbox") { 
      this.style.backgroundPosition = "0 0"; 
      element.checked = false; 
     } else { 
      if(element.type == "checkbox") { 
       this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; 
      } 
      element.checked = true; 
     } 
    }, 
    clear: function() { 
     inputs = document.getElementsByTagName("input"); 
     for(var b = 0; b < inputs.length; b++) { 
      if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") { 
       inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; 
      } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") { 
       inputs[b].previousSibling.style.backgroundPosition = "0 0"; 
      } 
     } 
    } 
} 
window.onload = Custom.init; 

Answer 1

由<h:selectBooleanCheckbox>生成的HTML只是應用CSS display: none;。

E.g.

<h:selectBooleanCheckbox style="display: none;" /> 

或

<h:selectBooleanCheckbox styleClass="hide" /> 

與

.hide { 
    display: none; 
}