label标签的二次点击事件

最新推荐文章于 2023-03-20 10:52:31 发布

VIP文章灼灼其华_csdn

最新推荐文章于 2023-03-20 10:52:31 发布

阅读量1.7k

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/xie123_csdn/article/details/64474910

版权

在做一个问卷调查页面的时候，因为自定义选框样式，隐藏掉了单选框和复选框的input标签，用与之关联的label的伪类样式实现选框的自定义样式。因为问卷存在问题跳转，需要根据某个问题不同的选择展示接下来的问题，这样就涉及到在click事件后获取选框选中的值的问题。当我在包含所有option的div上增加了点击事件后，发现第一次点击并不能获取相应input的值，所得为undefined，而第二次点击后，会得到第一次点击的值。后来就发现了label标签的两次点击事件。于是对label标签和点击事件做了一些实验。
html代码如下，在单选部分的div/input/label上分别设置了id，来测试不同部分的点击事件。

<body>
    <div id="select1">
        <input type="radio" name="sex" value="male" id="male"><label for="male" id="maleLabel">男</label><br>
        <input type="radio" name="sex" value="female" id="female"><