控制JavaScript的隱藏/顯示分度，無線電控制沒有jQuery的

Question

下面的代碼似乎並沒有工作

// JavaScript的

function t_show() { 
    if(document.getElementById("t_show").checked == true){ 
     if(document.getElementById("t_show").value == 1) { 
      showDiv("t_settings"); 
     } 
    } else { 
     hideDiv("t_settings"); 
    } 
} 

function show(show){ 
    var s = document.getElementById(show); 
    if(!s) return true; 
    s.style.display=""; 
    return true; 
} 

function hide(hide){ 
    var h = document.getElementById(hide); 
    if(!h) return true; 
    h.style.display="none"; 
    return true; 
} 

// HTML

Text show: 
<input type="radio" name="t_show" value="1" checked="checked" onchange="t_show(); update_preview();" id="t_show">Yes 
<input type="radio" name="t_show" value="0"     onchange="t_show(); update_preview();" id="t_show">No 

<div id="t_settings">This content is to be shown if the show text is enabled.</div> 

Answer 1

1. 您<div/>有一類t_settings但你打電話getElementById()
2. 要調用showDiv()但功能名稱實際上是show()
3. 要調用hideDiv()但功能名稱實際上是hide()
4. 而不是做s.style.display = "";使用s.style.display = "block";
5. document.getElementById("t_show").value == 1永遠是真的，你可以簡化它的使用document.getElementById("t_show").checked
6. 一個id需要是唯一的每個dom。每頁只能有一個。

把所有你一起結束了這一點：在jsfiddle

function showDiv(show) { 
    var s = document.getElementById(show); 
    if (!s) { 
     return true; 
    } 
    s.style.display = "block"; 
    return true; 
} 

function hideDiv(hide) { 
    var h = document.getElementById(hide); 
    if (!h) { 
     return true; 
    } 
    h.style.display = "none"; 
    return true; 
} 
function t_show() { 
    if (document.getElementById("t_show").checked) { 
     showDiv("t_settings"); 
    } 
    else { 
     hideDiv("t_settings"); 
    } 
} 

代碼示例。

Answer 2

在你的節目功能，改變...

s.style.display=""; 

to

s.style.display="block";

Answer 3

爲什麼不調用方法 「t_show（）」 中包含的布爾參數：

t_show（真）; //用於與輸入值= 1

...

t_show（假）; //用於值= 0

和功能輸入：

t_show(value) { 
if(value == true){ 
    showDiv("t_settings"); 
} else { 
    hideDiv("t_settings"); 
} 
} 

功能showDiv（節目）{}

功能hideDiv（節目）{}

，這樣你就不需要檢查值...

再見

Answer 4

你必須有幾個問題。馬克已經指出了大多數明顯的。我想補充一點，你應該總是隻有一個具有唯一ID的元素（甚至單選按鈕）。

另外，（幾乎）相同的活動不需要兩個JavaScript函數。

我建議這個：

HTML：

Text show: 
<input type="radio" name="t_show" value="1" checked="checked" onchange="t_show(); update_preview();" id="t_show_yes">Yes 
<input type="radio" name="t_show" value="0"     onchange="t_show(); update_preview();" id="t_show_no">No 

<div id="t_settings">This content is to be shown if the show text is enabled.</div> 

JS：上的jsfiddle

function t_show() { 
    if(document.getElementById("t_show_yes").checked == true) 
     setDisplay("t_settings", ""); 
    else 
     setDisplay("t_settings", "none"); 
} 

function setDisplay(id, value){ 
    var o = document.getElementById(id); 
    if(!o) 
     return false; 
    o.style.display = value; 
    return true; 
} 

例子：http://jsfiddle.net/ZptpP/

---

編輯 - 的要求，在意見：

您可以修改t_show函數來發送一組ID被隱藏/顯示。

function t_show() { 
    var elements = new Array("t_settings","div1","div2"); 

    if(document.getElementById("t_show_yes").checked == true) 
     setDisplay(elements, ""); 
    else 
     setDisplay(elements, "none"); 
} 

function setDisplay(elements, value){ 
    var o; 
    for (var i = 0; i < elements.length; i++) { 
     o = document.getElementById(elements[i]); 
     if (o != undefined) 
      o.style.display = value; 
    } 
    return true; 
} 

請參閱更新的小提琴：http://jsfiddle.net/ZptpP/1