使用javascript隐藏多个tr,div而不使用jquery

Question

如何根据复选框的结果隐藏多个表.

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

单击此div应该意味着应隐藏具有id t_settings的所有出现的元素.

JavaScript的:

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

多谢你们.

Answer 1

如何根据复选框的结果隐藏多个表.

你是否意识到id是SINGULAR并且你不能拥有多个具有相同id的元素？

显示或隐藏元素就像将显示设置为无一样简单.

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

我个人不会传递id,我只是传递对象,因为没有额外的查找:

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

JS代码

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

正如评论所述,如何为多个ID做到这一点？

你可以拆分和循环:

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

JS代码

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

或者你可以使用多个参数.

你可以循环参数:

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

JS代码

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