控制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