在做一个问卷调查页面的时候,因为自定义选框样式,隐藏掉了单选框和复选框的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"><