Как скрыть ярлыки в 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> 

Answer 2

Добавить class="DEPENDS ON info BEING student" в <label>.

Answer 3

Это выглядит Лик e, что скрипт зависимости формы ожидает 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 
    } 
} 

он должен работать.

Answer 4

Основываясь на W3 documentation присвоить метку на входе у вас есть tofollow этой инструкции

<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 получает фокус, он передает фокус на соответствующий элемент управления. См. Раздел ниже для ключей доступа для примеров.

Наклейки могут быть оказаны агентами пользователей несколькими способами (например, визуально, прочитанных синтезаторов речи и т.д.)

Таким образом, вы должны следовать инструкциям, было ясно или нет?