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.

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.

• javascript

• You really shouldn't have multiple elements with the same id attribute. Javascript and Html standards don't like that. – jessegavin Commented Apr 1, 2011 at 21:24
• how can i perform such a query to replace multiple tr, lets say with a same class. – Vish Commented Apr 1, 2011 at 21:51

2 Answers 2

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

EDIT: I just remembered there is a big patibility issue with document.getElementsByName() . http://www.quirksmode/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 mon 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/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/en/DOM/document.getElementsByName