-2

您好，我是 javascript 和 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。提前致谢！

4

4 回答 4

2

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

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

你有number多少个复选框

如果你不确定for循环是如何工作的，网上有大量的资源，比如MDN。

于 2013-10-21T16:04:59.273 回答
2

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

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

当您想显示您的复选框时，只需删除该类

function showhideid(){
if (document.form.checkbox.checked){   
    document.getElementById('yourform').classList.remove('checkBoxOff');
  }
}
于 2013-10-21T16:07:05.083 回答
0

如果所有复选框都是相关的，您可以将复选框打包到另一个元素中，例如 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";
于 2013-10-21T16:07:36.227 回答
0

为每个 Checkbox 添加一个类。说，class="Checkboxes"。然后在 JavaScript 中输入这样的类型。

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

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

然后在你的 body 标签中，添加这个属性：

onload="hideIdClass();"

然后在您的提交按钮标签中，添加此属性：

onclick="showIdClass();"
于 2013-10-21T16:26:38.293 回答