您的位置:首页技术文章
文章详情页

html - 移动端radio无法选中

浏览:70日期:2023-01-27 08:51:56

问题描述

<label for='flag1'><input type='radio' name='flag' value='1' /><i class='fa fa-circle-o'></i> <img src='https://www.haobala.com/wenda/flag1.png' /></label><label for='flag2'><input type='radio' name='flag' value='2' /><i class='fa fa-circle-o'></i> <img src='https://www.haobala.com/wenda/flag2.png' /></label><label for='flag3'><input type='radio' name='flag' value='3' /><i class='fa fa-circle-o'></i> <img src='https://www.haobala.com/wenda/flag3.png' /></label>

html - 移动端radio无法选中

点第三个的时候第一个会选中,非要精确点input那个点才能选择,遇到过两次了,就是不知道什么原因造成的

问题解答

回答1:

label标签不是这样用的,他的开始跟闭合标签之间不能加其他标签。否则他的for属性不起作用的。<label for='a'></label><input type....... />这样就可以他会自己去找id为a的标签

回答2:

lable失效,/lable位置不对吧放在input前面试试

回答3:

我发现是mui的js影响到的,具体是怎么影响的还不清楚,因为我把页面的mui.js去掉了就正常了,加上就出现异常

找到问题所在了,我在mui.js v2.8.0 第920行左右找到以下代码

var handle = function(event, target) { if (target.tagName === ’LABEL’) {if (target.parentNode) {//问题就出在这一行target = target.parentNode.querySelector(’input’);} } if (target && (target.type === ’radio’ || target.type === ’checkbox’)) {if (!target.disabled) { //disabledreturn target;} } return false;};

可以在引入mui之前加上以下代码解决

<script>window.FastClick = true;</script>

标签: HTML
相关文章: