CODEWITHSUNDEEP
javascript
Vish
Vish

Reputation: 4492

hide multiple tr, div with javascript without jquery

How can I hide multiple tables based on a result from a checkbox.

<input type="checkbox" name="t_show" value="1"  checked="checked" onchange="visible_checkbox(this.id, 't_settings'); update_preview();" id="t_show">

Clicking on this div should mean that all the occurring elements with the id t_settings should be hidden.

javascript:

 function visible_checkbox(x, y) {
        var v = document.getElementById(x).checked;
        if(v == 1) {
            show(y);
        } else {
            hide(y);
        }
    }

Thanks guys.

Upvotes: 2

Views: 4853

Answers (2)

Aleadam
Aleadam

Reputation: 40391

EDIT: I just remembered there is a big compatibility issue with document.getElementsByName() . http://www.quirksmode.org/dom/w3c_core.html

Showing another alternative which uses .getElementsByTagName(). I'm still based on the method posted by epascarello:

You can iterate through all the DIVs and search for a common id pattern (e.g., using id="xxx_1", id="xxx_2", etc:

function visible_checkbox(checkbox, baseId) {
    var isChecked = checkbox.checked;
    var showHide = isChecked ?"":"none";
    var rows = rows.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; ++i) {
        var id = rows[i].id.split("_")[0];
        if (id === baseId) 
            rows[i].style.display = showHide;  
    }
}

https://developer.mozilla.org/en/DOM/document.getElementsByTagName

This is the first response (disregard)

Use 'name' instead of 'id' and then the method posted by epascarello: 

function visible_checkbox(checkbox, tableNames) {
    var isChecked = checkbox.checked;
    var showHide = isChecked ?"":"none";
    var elements = document.getElementsByName(tableNames);
    for (var i = 0; i < elements.length; ++i) {
      elements[i].style.display = showHide;  
    }
}

https://developer.mozilla.org/en/DOM/document.getElementsByName

Upvotes: 1

epascarello
epascarello

Reputation: 207501

How can I hide multiple tables based on a result from a checkbox.

Do you realize that id is SINGULAR and you can not have more than one element with the same id?

Showing or hiding an element is as simple as setting the display to none.

function visible_checkbox(checkboxId, tableId) {
    var isChecked = document.getElementById(checkboxId).checked;
    var showHide = isChecked ?"":"none";
    document.getElementById(tableId).style.display = showHide;
}

Personally I would not pass the id,I would just pass the object since there would be no extra lookup:

onchange="visible_checkbox(this, 't_settings');

JS Code

function visible_checkbox(checkbox, tableId) {
    var isChecked = checkbox.checked;
    var showHide = isChecked ?"":"none";
    document.getElementById(tableId).style.display = showHide;
}

As the comment asked, how to do it for multiple ids?

You can split and loop:

onchange="visible_checkbox(this, 't1,t2,t3');

JS Code

function visible_checkbox(checkbox, tableId) {
    var isChecked = checkbox.checked;
    var showHide = isChecked ?"":"none";
    var ids = tableId.split(",");
    for(var i=0;i<ids.length;i++){
        document.getElementById(ids[i]).style.display = showHide;
    }
}

OR you can make it with multiple arguments.

You can loop the arguments:

onchange="visible_checkbox(this, 't1', 't2', 't3');

JS Code

function visible_checkbox(checkbox) {
    var isChecked = checkbox.checked;
    var showHide = isChecked ?"":"none";
    for(var i=1;i<arguments.length;i++){
        document.getElementById(arguments[i]).style.display = showHide;
    }
}

Upvotes: 6

Related Questions