Question

我使用屏幕上显示的底层2D数组，使用大小为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>

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

Answer 1

在最基本的情况下，你可能只是这样：

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

隐藏/显示表单（复选框表单） - javascript

1 个答案: