label标签的二次点击事件_xaml label具有点击功能-优快云博客

本文链接：https://blog.youkuaiyun.com/xie123_csdn/article/details/64474910

在问卷调查页面开发中，由于自定义样式隐藏了input标签，通过label伪类实现选框效果。然而，这导致了label的二次点击事件问题，即第一次点击无法获取选中值，第二次点击才能获取。解决方案是将点击事件绑定到包含input和label的外层div，或者在ng-repeat中利用index判断选中项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做一个问卷调查页面的时候，因为自定义选框样式，隐藏掉了单选框和复选框的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"><label for="female">女</label>
    </div>
    <div id="select2">
        <input type="checkbox" name="num" value="a" id="1"><label for="1">A</label><br>
        <input type="checkbox" name="num" value="b" id="2"><label for="2">B</label><br>
        <input type="checkbox" name="num" value="c" id="3"><label for="3">C</label>
    </div>
</body>

当在select1上设置点击事件并点击label部分时，控制台输出如下：

$("#select1").click(function(){
    var val  = $('input[name="sex"]:checked').val();
                console.log(val);           
});

这里写图片描述
点击事件出现了两次，一次是发生label上，此时input上并没有点击事件，所以输出为undefined，第二次点击事件发生在与之关联的input上，得到选中的值。
此时如点击发生在input部分，则不会有undefined出现。
所以，当我把点击事件设置在label上时，就会出现第一次得到undefined，第二次得到第一次点击的值了，因为label的click事件发生时，input的click事件还没发生。
因此，在把input隐藏掉的情况下，要想获得click选中的值，就只有把click事件定义在包含input和label的外层div上了。不过由于项目中对option使用了ng-repeat，使用index来间接判断选中的选项也是可以的，这样click事件就可以定义在label上了。
项目中的dom结构如下：

<div class="ques-item hide1 show1" id="q4">
    <div class="ques-item-question">
        4.{{questions[3].questionContent}}
    </div>
    <div class="ques-item-option">
        <div ng-repeat="option in questions[3].options">
            <input type="{{questions[3].questionType}}" name="problem4" value="{{option.optionCode}}" id="{{option.id}}">
            <label for="{{option.id}}" ng-click="clickShow(4, $index)">{{option.optionContent}}
            </label>
            <textarea ng-if="$index == 3" class="ques-option-text" name="" id="" cols="30" rows="1" ng-model="text4">
            </textarea>
        </div>
    </div>
</div>