Question

I have this code which depends on this javascript from dynamic drive:
http://dynamicdrive.com/dynamicindex16/formdependency.htm
Its a form dependency manager. Which will show or hide elements depending on what you choose from the forms that are revealed:

I don’t know why but If I alter the code from this:

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

To this:

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

Note: The only change that I did here is to transfer the label from the left side of the checkbox to the right side so that they will look better.
But when I do this. The labels will be visible even if I did not yet click on the button that will make it visible(but without the checkboxes).

And when I click on that button, that’s the only time when the checkbox will appear on the left side of the labels.

The checkbox is ok, but the label is not. And the javascript is working properly.
What do I do so that the checkbox and label will go together?

Answer 1

I think the simplest solution is to leave the <label> tag in front of the <input> tag and just move the text to the right of it:

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

Or you can use SLaks answer and add an id attribute to the <input> tag and a matching for attribute to the <label> tag like so (so that the text toggles the checkbox):

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