点击radio后面的文字勾选框选中

在开发过程中会发现,必须点击圆圈圈的时候才能触发选中,这种体验不是很好,下面是两种点击后面的文字时触发的勾选。

第一种:

<form action="">
<input type="radio" name="sex" value="male" id="radio1">
    <label for="radio1">男</label>  <br>
<input type="radio" name="sex" value="female" id="radio2">
    <label for="radio2">女</label>
</form>

添加label标签,然后添加for属性,关联对应radio的ID。

第二种:

<form action="">
<label><input type="radio" name="sex" value="male" id="radio1">男</label>  <br>
<label><input type="radio" name="sex" value="female" id="radio2">女</label>
</form>

直接在选项外面添加lable元素即可。

猜你喜欢

转载自blog.csdn.net/weixin_37020977/article/details/81914589