Want more features on Pastebin? Sign Up, it's FREE!

multi styling checkboxes js

By: johnny4000 on Nov 26th, 2011  |  syntax: JavaScript  |  size: 5.12 KB  |  views: 2,118  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1.  
  2. var checkboxHeight = "25";
  3. var radioHeight = "25";
  4. var selectWidth = "190";
  5.  
  6.  
  7. /* No need to change anything after this */
  8.  
  9.  
  10. 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>');
  11.  
  12. var Custom = {
  13.   init: function() {
  14.     var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
  15.     for(a = 0; a < inputs.length; a++) {
  16.     if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {
  17.         span[a] = document.createElement("span");
  18.         /*span[a].className = inputs[a].type;*/
  19.         span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");
  20.        
  21.         if(inputs[a].checked == true) {
  22.           if(inputs[a].type == "checkbox") {
  23.             position = "0 -" + (checkboxHeight*2) + "px";
  24.             span[a].style.backgroundPosition = position;
  25.           } else {
  26.             position = "0 -" + (radioHeight*2) + "px";
  27.             span[a].style.backgroundPosition = position;
  28.           }
  29.         }
  30.         inputs[a].parentNode.insertBefore(span[a], inputs[a]);
  31.         inputs[a].onchange = Custom.clear;
  32.         if(!inputs[a].getAttribute("disabled")) {
  33.           span[a].onmousedown = Custom.pushed;
  34.           span[a].onmouseup = Custom.check;
  35.         } else {
  36.           span[a].className = span[a].className += " disabled";
  37.         }
  38.       }
  39.     }
  40.     inputs = document.getElementsByTagName("select");
  41.     for(a = 0; a < inputs.length; a++) {
  42.       if(inputs[a].className.search(/^styled/) != -1) {
  43.         option = inputs[a].getElementsByTagName("option");
  44.         active = option[0].childNodes[0].nodeValue;
  45.         textnode = document.createTextNode(active);
  46.         for(b = 0; b < option.length; b++) {
  47.           if(option[b].selected == true) {
  48.             textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
  49.           }
  50.         }
  51.         span[a] = document.createElement("span");
  52.         span[a].className = "select";
  53.         span[a].id = "select" + inputs[a].name;
  54.         span[a].appendChild(textnode);
  55.         inputs[a].parentNode.insertBefore(span[a], inputs[a]);
  56.         if(!inputs[a].getAttribute("disabled")) {
  57.           inputs[a].onchange = Custom.choose;
  58.         } else {
  59.           inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";
  60.         }
  61.       }
  62.     }
  63.     document.onmouseup = Custom.clear;
  64.   },
  65.   pushed: function() {
  66.     element = this.nextSibling;
  67.     if(element.checked == true && element.type == "checkbox") {
  68.       this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
  69.     } else if(element.checked == true && element.type == "radio") {
  70.       this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
  71.     } else if(element.checked != true && element.type == "checkbox") {
  72.       this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
  73.     } else {
  74.       this.style.backgroundPosition = "0 -" + radioHeight + "px";
  75.     }
  76.   },
  77.   check: function() {
  78.     element = this.nextSibling;
  79.     if(element.checked == true && element.type == "checkbox") {
  80.       this.style.backgroundPosition = "0 0";
  81.       element.checked = false;
  82.     } else {
  83.       if(element.type == "checkbox") {
  84.         this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
  85.       } else {
  86.         this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
  87.         group = this.nextSibling.name;
  88.         inputs = document.getElementsByTagName("input");
  89.         for(a = 0; a < inputs.length; a++) {
  90.           if(inputs[a].name == group && inputs[a] != this.nextSibling) {
  91.             inputs[a].previousSibling.style.backgroundPosition = "0 0";
  92.           }
  93.         }
  94.       }
  95.       element.checked = true;
  96.     }
  97.   },
  98.   clear: function() {
  99.     inputs = document.getElementsByTagName("input");
  100.     for(var b = 0; b < inputs.length; b++) {
  101.       if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className.search(/^styled/) != -1) {
  102.         inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
  103.       } else if(inputs[b].type == "checkbox" && inputs[b].className.search(/^styled/) != -1) {
  104.         inputs[b].previousSibling.style.backgroundPosition = "0 0";
  105.       } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className.search(/^styled/) != -1) {
  106.         inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
  107.       } else if(inputs[b].type == "radio" && inputs[b].className.search(/^styled/) != -1) {
  108.         inputs[b].previousSibling.style.backgroundPosition = "0 0";
  109.       }
  110.     }
  111.   },
  112.   choose: function() {
  113.     option = this.getElementsByTagName("option");
  114.     for(d = 0; d < option.length; d++) {
  115.       if(option[d].selected == true) {
  116.         document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
  117.       }
  118.     }
  119.   }
  120. }
  121. window.onload = Custom.init;
  122.  
clone this paste RAW Paste Data