FF和Safari下用label，嵌套两个表单元素，两个变大元素都触发

今天在写代码的时候发现很奇怪的事情，就是在火狐FF点击checkbox竟然两个checkbox都触发点击事件。

<label> <input type="checkbox" checked="checked" class="check-box" name="remember-name" value="" />记住用户名 <input type="checkbox" class="check-box" name="no-login" value="" />两周内免登录 </label> 

非常的奇怪：

记住用户名 两周内免登录

火狐3.8.10下像上面这样你点击两周内免登录，结果前面的记住用户名那块打钩了。

然后是Safari下，同样有这样的问题。

然后看下面：

忘记密码？注册

点忘记密码旁边的空白处，惊人的发现它触发了登录按钮。这足以说明，label下不能接两个表单标签。

 

后来在w3school上发现了label的说明：

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

仅此以记。