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>

Answer 2

将class="DEPENDS ON info BEING student"添加到<label>。

Answer 3

根据 W3 documentation 为输入分配标签，您必须遵循此说明

 <FORM action="..." method="post">
 <P>
      <LABEL>
         First Name
         <INPUT type="text" name="firstname">
      </LABEL>
      <LABEL>
         <INPUT type="text" name="lastname">
         Last Name
      </LABEL>
 </P>
 </FORM>

该文章中包含的文字

要隐式地将标签与另一个控件相关联，控制元素必须位于LABEL元素的内容中。在这种情况下，LABEL可能只包含一个控制元素。标签本身可以位于相关控件之前或之后。

请注意，当表格用于布局时，不能使用此技术，标签位于一个单元格中，其关联控件位于另一个单元格中。

当LABEL元素获得焦点时，它会将焦点传递给其关联的控件。有关示例，请参阅下面的访问键部分。

标签可以由用户代理以多种方式呈现（例如，在视觉上，由语音合成器等读取）。

所以你必须遵循指示，是否清楚？

Answer 4

看起来表单依赖脚本需要HTML格式

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

并且不处理任何其他情况。

如果您为输入添加了id属性，并为标签添加了for属性：

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

并在FormManager.js中将其添加到showEl()和hideEl()的末尾（在setupDependencies()内）：

var id = this.id, labels = document.getElementsByTagName('label'), l = labels.length, label, i;
for (i = 0; i < l; i++) {
    label = labels[i];
    if (label.htmlFor == id) {
        label.style.display = 'none'; // 'none' for hideEl, '' for showEl
    }
}

它应该有用。

如何在html中隐藏标签

4 个答案: