关于label关联radio时候的问题
话不多说 直接上代码
<!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外面就没这个现象了 还有其他方法吗? 还有这个现象的本质是什么? 谢谢各位
尚方宝剑之说浏览 1151回答 1
1回答
-
富国沪深
正确的关联一个label标签到一个input标签做法就是把label拿到外面，因为你已经用了for属性来表示label应该关联哪一个input：<input id="input-radio-boy" type="radio" name="sex" value="1"> <label id="input-radio-boy-label" for="input-radio-boy">男</label>因为label标签有一个特性，就是会传递'click'消息给关联到的input方法，按你这个写法当label标签被点击的时候，input会收到一个'click'消息，碰巧'click'消息还有一个特性是逐级向上传递的，而label又在input的上一级，因此'label'自身又会收到一次'click'消息。因此你最后看到了两次alert。
随时随地看视频慕课网APP
相关分类
JavaScript