0

我有一个大小为 X x Y 的板的纯文本表示，它使用屏幕上显示的底层二维数组。每个单元格都有 1 或 0 作为值，并且有预设的阵列配置，用户可以选择在板上显示。

我希望用户能够选择他们自己的自定义板配置（即选择哪些单元格应该为 1，而未选中的单元格为 0）。为此，我只需设置一个 16 x 16 的复选框输入表。在它的底部是一个提交按钮，一旦他们选择了他们的配置，他们可以单击以绘制板。

<table>
    <tr>    
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        ...
    </tr>
    <tr>    
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        ...
    </tr>
    ...
</table>

我的问题：如何在必要时隐藏/显示复选框？我只想在用户专门单击他们想要创建自定义布局时显示复选框输入。一旦他们选择了框并按下提交，我将处理数据，但我还想隐藏复选框。这可能吗？谢谢！

4

1 回答 1

0

在最基本的情况下，你可以简单地拥有这样的东西：

CSS：

input[type=checkbox] {
  display: none; /* Make them initially hidden */
}

HTML：

<input type="button" value="Customize" onclick="showCheckboxes()"/>

Javascript：

function showCheckboxes(){
  var checkboxes = document.getElementsByTagName('input')
  for(var i=0; i<checkboxes.length; i++){
    if(checkboxes[i].type == 'checkbox'){
     checkboxes[i].style.display = 'inline');
    }
  }
}

当一些其他事件或交互发生时，您显然可以使用类似的逻辑再次隐藏这些框。这假定应显示页面上的所有复选框。如果页面上还有其他人，您需要通过名称或类识别您想要影响的人，并在循环中检查它们。

像往常一样，使用 jQuery 这样的框架会简单得多。

在提交表单之前隐藏复选框并不是一件很常见的事情。然而，你可以有这样的东西来实现它：

<form onsubmit="hideCheckboxes(); return true;">
于 2013-03-24T22:00:13.233 回答