关于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外面就没这个现象了 还有其他方法吗? 还有这个现象的本质是什么? 谢谢各位

阅读 4k
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。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题