使用Javascript - 動態造型單選按鈕

Question

我有一個問題後生成的ID跨度。我試圖根據單選按鈕在「激活幀」和「設備幀」div上進行顯示/隱藏。我讓它工作正常，但客戶決定添加風格的單選按鈕的方程。這已經打破了我的顯示/隱藏切換。我如何將它融入風格化的單選按鈕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 == "radio") && inputs[a].className == "styled") { 
      span[a] = document.createElement("span"); 
      span[a].className = inputs[a].type; 

      if(inputs[a].checked == true) { 
        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 == "radio") { 
     this.style.backgroundPosition = "0 -" + radioHeight*3 + "px"; 
    } else { 
     this.style.backgroundPosition = "0 -" + radioHeight + "px"; 
    } 
}, 
check: function() { 
    element = this.nextSibling; 
      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 == "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; 

這裏是我的舊腳本，並顯示/隱藏：

function showhideInstall(installtype) { 
if (installtype == "equipmentswap") { 
    document.getElementById("activationframe").style.display = 'none'; 
    document.getElementById("equipmentframe").style.display = 'block'; 
} else { 
    document.getElementById("activationframe").style.display = 'block'; 
    document.getElementById("equipmentframe").style.display = 'none'; 
} 
} 

最後，我的HTML：

<div id="activationtoggle"> 
      <form class="radiobuttons"> 
       <input type="radio" name="installtype" value="activation" class="styled" onclick="showhideInstall(this.value);" checked>&nbsp;&nbsp;New Activation 
       <input type="radio" name="installtype" value="equipmentswap" class="styled" onclick="showhideInstall(this.value);" >&nbsp;&nbsp;Equipment Swap 
      </form> 
     </div> 

     <div id="activationframe"> 
      <div id="activationchecklist"> 
        code here 
       </div> 

      <div id="equipmentframe"> 
       <div id="equipmentswap"> 
       <h2>Equipment Swap</h2> 
       more code here 
       </div> 

任何幫助將非常感激。我在JS中（最好），這已經被證明是一個巨大的時間。

Answer 1

有一個朋友幫我解決這個問題，感謝您的幫助，大家好。

這是他給我提供了與JS：

function showhideInstall(installtype) { 
    if (installtype == "equipmentswap") { 
     document.getElementById("activationframe").style.display = 'none'; 
     document.getElementById("equipmentframe").style.display = 'block'; 
    } else { 
     document.getElementById("activationframe").style.display = 'block'; 
     document.getElementById("equipmentframe").style.display = 'none'; 
    } 
} 
function newactivation(indexNum) { 

    var inputs = document.getElementsByTagName("label"); 
    for(a = 0; a < inputs.length; a++) { 

     if(inputs[a].id == "activation" + indexNum){ 
      inputs[a].style.color = "#b5b5b5"; 
     } 
    } 

    var activechecked = 0; 
    for (var i = 1; i<= 7; i++) { 
     if(document.getElementById("activationcheck" + i).checked == true){ 
      activechecked ++; 
     }else if(document.getElementById("activationnocheck" + i).checked == true){ 
      activechecked ++; 
     } 
    } 

    if (activechecked <= 6) {document.getElementById("next").disabled= true;} 
    if (activechecked == 7) {document.getElementById("next").disabled= false; document.getElementById("next").style.cursor= "pointer"; } 
} 
function equipmentswap(indexNum) { 
    var inputs = document.getElementsByTagName("label"); 
    for(a = 0; a < inputs.length; a++) { 

     if(inputs[a].id == "equip" + indexNum){ 
      inputs[a].style.color = "#b5b5b5"; 
      a=inputs.length + 1;   
     } 
    } 

    var activechecked = 0; 
    for (var i = 1; i<= 7; i++) { 
     if(document.getElementById("swapcheck" + i).checked == true){ 
      activechecked ++; 
     }else if(document.getElementById("swapnocheck" + i).checked == true){ 
      activechecked ++; 
     } 
    } 

    if (activechecked <= 6) {document.getElementById("equipnext").disabled= true;} 
    if (activechecked == 7) {document.getElementById("equipnext").disabled= false; document.getElementById("next").style.cursor= "pointer"; } 
}