javascript - 使用没有 jquery 的单选控件控制 javascript 隐藏/显示 div

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 都必须是唯一的。应该只有一个 t_show每页。

将所有这些放在一起你最终会得到这个:

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");
    }
}

jsfiddle 上的代码示例.