"label for" doesn't toggle control

Question

<form>
   <label for="male">Male</label>
   <input type="radio" name="sex" id="male" />
   <br />
   <label for="female">Female</label>
   <input type="radio" name="sex" id="female" />
 </form>

I have something like above code. When users click the label it should toggle the input and focus on it. It works everywhere but on a popup page. Since this functionality comes with html I have no idea what is happening. I really appreciate if some one can give me a hint. I am investigating my pop up page.

Thanks

Answer 1

Any chance you use that id mutiple times on your page?

Also in your case I would just do:

<form>
   <label>Male <input type="radio" name="sex" id="male" /></label>
   <br />
   <label>Female <input type="radio" name="sex" id="female" /></label>
</form>