javascript - 如何在html中隐藏标签

Question

我有这段代码依赖于来自动态驱动器的 javascript: http://dynamicdrive.com/dynamicindex16/formdependency.htm它是一个表单依赖管理器。这将根据您从显示的表单中选择的内容显示或隐藏元素:

我不知道为什么，但是如果我从这里更改代码:

<td>
       <label>ID Number<input type="checkbox" name="id" class="DEPENDS ON info BEING student"></label>
           </td>
        </tr>

对此:

    <td>
    <input type="checkbox" name="id" class="DEPENDS ON info BEING student"><label>ID Number</label>
       </td>
    </tr>

注意:我在这里所做的唯一更改是将标签从复选框的左侧转移到右侧，这样它们看起来会更好。但是当我这样做的时候。即使我还没有点击使其可见的按钮(但没有复选框)，标签也会可见。

当我点击那个按钮时，这是唯一一次复选框会出现在标签的左侧。

复选框可以，但标签不行。并且 javascript 工作正常。我该怎么做才能使复选框和标签放在一起？

Answer 1

我认为最简单的解决方案是保留 <label> <input> 前面的标签标记并将文本移动到它的右侧:

<td>
<label><input type="checkbox" name="id" class="DEPENDS ON info BEING student">ID Number</label>
   </td>
</tr>

或者您可以使用 SLaks 答案并添加 id属性为 <input>标签和匹配 for属性为 <label>像这样标记(以便文本切换复选框):

<td>
<input type="checkbox" name="id" class="DEPENDS ON info BEING student" id="example"><label for="example" class="DEPENDS ON info BEING student">ID Number</label>
   </td>
</tr>