How to hide shortcuts in html

Question

I have this code which depends on this javascript on a dynamic disk: http://dynamicdrive.com/dynamicindex16/formdependency.htm Its form dependent manager. What will display or hide elements depending on what you choose from the revealed forms:

I don't know why, but if I changed the code from this:

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

For this:

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

Note. The only change I made here is to pass the label on the left side of the checkbox to the right to make them look better. But when I do it. The shortcuts will be visible even if I have not yet clicked a button that will make it visible (but without the checkboxes).

And when I click on this button, this is the only time a checkmark appears on the left side of the shortcuts.

, . 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, ,

 <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

It looks like the form dependency script expects HTML in the form

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

and does not handle other cases.

If you add attributes idto your entries and attributes forto your labels:

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

and in FormManager.js add this to the end showEl()and hideEl()(inside 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
    }
}

he should work.