Question

您好我是javascript＆amp;的新手HTML和我有一个问题。在我的html中使用了很多复选框，我想在加载页面时使它们全部不可见，当他们点击按钮时它们都必须变得可见。有谁知道如何做到这一点？我发现以下代码机器人对我来说看起来效率不高，因为我使用了大约35个复选框。

JS：

function showhideid(){
if (document.form.checkbox.checked){   
    document.getElementById("id1").style.visibility = "visible";
    document.getElementById("id2").style.visibility = "visible";
    document.getElementById("id3").style.visibility = "visible";
  }
}

id1，id2，id3是我给我的复选框的id。提前谢谢！

Answer 1

您可以为所有ID使用for循环

for(var i=1;i<=number;i++) {
    document.getElementById("id"+i).style.visibility = "visible";
}

其中number是您拥有的复选框

如果您不确定for循环是如何工作的，那么在线有大量资源，例如MDN。

Answer 2

这样做的最好方法不是改变每一个。如果您只有一个操作显示并隐藏所有复选框，则可以使用css类。因此，只需在页面加载时在表单上使用此类。

.checkBoxOff input[type="checkbox"]{
    display:none;
}

当您想要显示复选框时，只需删除课程

即可

function showhideid(){
if (document.form.checkbox.checked){   
    document.getElementById('yourform').classList.remove('checkBoxOff');
  }
}

Answer 3

如果所有复选框都相关，则可以将复选框打包到另一个元素中，例如DIV。所以，你会有这样的事情：

<div id='allMyCheckboxes'>    
     <input type='checkbox' id='id1'....    
     <input type='checkbox' id='id2'....    
     <input type='checkbox' id='id3'....
    .... 
</div>

然后，您的所有JavaScript必须切换allMyCheckboxes元素的可见性。

document.getElementById("allMyCheckboxes").style.visibility = "visible";

Answer 4

为每个复选框添加一个类。比如说， class =“Checkboxes”。然后在这样的JavaScript类型中。

function hideIdClass() {
    document.getElementByClass("Checkboxes").style.visibility= "invisible;"
}

function showIdClass() {
    document.getElementByClass("Checkboxes").style.visibility= "visible";
}

然后在您的body标签中添加以下属性：

onload="hideIdClass();"

然后在提交按钮标记中添加以下属性：

onclick="showIdClass();"

如何使用javascript使所有复选框可见

4 个答案: