html - Control javascript hideshow div with radio controls without jquery - Stack Overflow

admin管理员组

文章数量:1335560

The code below doesn't seem to work

//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>

The code below doesn't seem to work

//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>

• javascript
• html

Share Improve this question Follow edited Apr 1, 2011 at 19:43 Vish asked Apr 1, 2011 at 19:27 VishVish 4,4921010 gold badges4646 silver badges7676 bronze badges 1

• if there are multiple divs like this. Also if I wanna hide a table, or a tr, and td along with this, how do i do that. – Vish Commented Apr 1, 2011 at 20:10

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

1. You <div/> has a class of t_settings but you are calling getElementById()
2. You are calling showDiv() but the function name is actually show()
3. You are calling hideDiv() but the function name is actually hide()
4. Instead of doing s.style.display = ""; use s.style.display = "block";
5. document.getElementById("t_show").value == 1 will always be true, you can just simplify it to use document.getElementById("t_show").checked
6. An id needs to be unique per the dom. there should only be one t_show per page.

Putting all that together you end up with this:

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

Code example on jsfiddle.

You have a few problems there. Mark already pointed out most of the obvious ones. I'd add that you should always have just one element with a unique ID (even radio buttons).

Also, you don't need two JavaScript functions for the (almost) same activity.

I'd suggest this:

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:

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

Example on jsFiddle: http://jsfiddle/ZptpP/

---

EDIT - As requested in the ments:

You could modify the t_show function to send an array of IDs to be hidden/displayed.

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

See the updated fiddle: http://jsfiddle/ZptpP/1

In your show function, change...

 s.style.display="";

to

 s.style.display="block";

why don't invoke method "t_show()" with a boolean parameter like:

t_show(true);// for input with value = 1

...

t_show(false);// for input with value = 0

and function:

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

function showDiv(show){ }

function hideDiv(show){ }

so you don't need to check value...

bye

本文标签： htmlControl javascript hideshow div with radio controls without jqueryStack Overflow