檢查所有複選框與風格的JavaScript類將不會'工作

Question

我有一個主複選框勾選時，應選中所有複選框。這部分工作完美使用JavaScript。如果我使用另一個javascript將複選框的CSS類添加到複選框的列表中，這些複選框的外觀很好，主複選框的主要功能將停止正常工作。

下面是我用來勾選複選框（checkBoxStyled.js）的腳本。

var checkboxHeight = "25"; 
var radioHeight = "25"; 
var selectWidth = "190"; 

document.write('<style type="text/css">input.styled { display: none; } select.styled {  position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .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" || inputs[a].type == "radio") && inputs[a].className == "styled") { 
      span[a] = document.createElement("span"); 
      span[a].className = inputs[a].type + "Styled"; 

      if(inputs[a].checked == true) { 
       if(inputs[a].type == "checkbox") { 
        position = "0 -" + (checkboxHeight*2) + "px"; 
        span[a].style.backgroundPosition = position; 
       } else { 
        position = "0 -" + (radioHeight*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"; 
      } 
     } 
    } 
    inputs = document.getElementsByTagName("select"); 
    for(a = 0; a < inputs.length; a++) { 
     if(inputs[a].className == "styled") { 
      option = inputs[a].getElementsByTagName("option"); 
      active = option[0].childNodes[0].nodeValue; 
      textnode = document.createTextNode(active); 
      for(b = 0; b < option.length; b++) { 
       if(option[b].selected == true) { 
        textnode = document.createTextNode(option[b].childNodes[0].nodeValue); 
       } 
      } 
      span[a] = document.createElement("span"); 
      span[a].className = "select"; 
      span[a].id = "select" + inputs[a].name; 
      span[a].appendChild(textnode); 
      inputs[a].parentNode.insertBefore(span[a], inputs[a]); 
      if(!inputs[a].getAttribute("disabled")) { 
       inputs[a].onchange = Custom.choose; 
      } else { 
       inputs[a].previousSibling.className = inputs[a].previousSibling.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 == "radio") { 
     this.style.backgroundPosition = "0 -" + radioHeight*3 + "px"; 
    } else if(element.checked != true && element.type == "checkbox") { 
     this.style.backgroundPosition = "0 -" + checkboxHeight + "px"; 
    } else { 
     this.style.backgroundPosition = "0 -" + radioHeight + "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"; 
     } else { 
      this.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; 
      group = this.nextSibling.name; 
      inputs = document.getElementsByTagName("input"); 
      for(a = 0; a < inputs.length; a++) { 
       if(inputs[a].name == group && inputs[a] != this.nextSibling) { 
        inputs[a].previousSibling.style.backgroundPosition = "0 0"; 
       } 
      } 
     } 
     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"; 
     } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") { 
      inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; 
     } else if(inputs[b].type == "radio" && inputs[b].className == "styled") { 
      inputs[b].previousSibling.style.backgroundPosition = "0 0"; 
     } 
    } 
}, 
choose: function() { 
    option = this.getElementsByTagName("option"); 
    for(d = 0; d < option.length; d++) { 
     if(option[d].selected == true) { 
      document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue; 
     } 
    } 
} 
} 
window.onload = Custom.init; 

下面是HTML（的index.html）。需要注意的是，如果我刪除class = '風格'，一切都運行完美

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="en"> 

<script type="text/javascript" src="checkBoxStyled.js"></script> 
<link rel="stylesheet" type="text/css" href="checkBoxStyled.css"> 
</head> 

<body> 
<div class="well"> 
<script type="text/javascript">function check_all(abox) {var table = document.getElementById('userFlashReports');var cboxes = table.getElementsByTagName('input'); var l = cboxes.length; for (var i = 0; i < l; i++) {var n = cboxes[i]; n.checked = abox.checked;}}</script> 
<div> 
<input name="all" id="title_1" type="checkbox" onclick="check_all(this)" class="styled"> 
     Toggle All 
    </div> 
    <div id="userFlashReports"> 
     <div class="checkboxSpaced"> 
      <input class="styled" id="UserFlashReportsForm_flashReports_0" value="dmsReport" type="checkbox" name="UserFlashReportsForm[flashReports][]"> 
      label1 
     </div> 
     <div class="checkboxSpaced"> 
      <input class="styled" id="UserFlashReportsForm_flashReports_1" value="gobReport" type="checkbox" name="UserFlashReportsForm[flashReports][]"> 
      label2 
     </div> 
     <div class="checkboxSpaced"> 
      <input class="styled" id="UserFlashReportsForm_flashReports_2" value="marketSegmentReport" checked="checked" type="checkbox" name="UserFlashReportsForm[flashReports][]"> 
      label3 
     </div> 
    </div> 
</div> 
</body> 
</html> 

CSS文件（checkBoxStyled.css）

.checkboxStyled, .radioStyled { 
width: 19px; 
height: 25px; 
padding: 0 5px 0 0; 
background: url(checkbox.png) no-repeat; 
display: block; 
clear: left; 
float: left; 
} 

.selectStyled { 
position: absolute; 
width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */ 
height: 21px; 
padding: 0 24px 0 8px; 
color: #fff; 
font: 12px/21px arial,sans-serif; 
background: url(select.png) no-repeat; 
overflow: hidden; 
} 

這裏是圖像checkbox.png

Answer 1

//Add following styles 

.checkboxStyled:checked { 
background-position: 0px -50px; 
} 
.radioStyled :checked { 
background-position: 0px -50px; 
}