话不多说 直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label for="input-radio-boy">
<input id="input-radio-boy" name="sex" type="radio">男
</label>
<label for="input-radio-girl">
<input id="input-radio-girl" name="sex" type="radio">女
</label>
<script>
var labels = document.getElementsByTagName('label');
for(var i=0;i<labels.length;i++){
labels[i].onclick = function(){
alert(1);
}
}
</script>
</body>
</html>
我点击男或者女 不碰到radio的小圈圈 为什么会弹出两下1 有没有什么解决的办法 恩 我知道吧input拿到label外面就没这个现象了 还有其他方法吗? 还有这个现象的本质是什么? 谢谢各位
正确的关联一个label标签到一个input标签做法就是把label拿到外面,因为你已经用了for属性来表示label应该关联哪一个input:
因为label标签有一个特性,就是会传递'click'消息给关联到的input方法,按你这个写法当label标签被点击的时候,input会收到一个'click'消息,碰巧'click'消息还有一个特性是逐级向上传递的,而label又在input的上一级,因此'label'自身又会收到一次'click'消息。因此你最后看到了两次alert。