html - 移动端radio无法选中-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html - 移动端radio无法选中

怪我咯 2017-04-17 14:41:28

[HTML讨论组]

922

<label for="flag1"><input type="radio" name="flag" id="flag1" value="1" /><i class="fa fa-circle-o"></i> <img src="flag1.png" /></label>
<label for="flag2"><input type="radio" name="flag" id="flag2" value="2" /><i class="fa fa-circle-o"></i> <img src="flag2.png" /></label>
<label for="flag3"><input type="radio" name="flag" id="flag3" value="3" /><i class="fa fa-circle-o"></i> <img src="flag3.png" /></label>

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

怪我咯

走同样的路，发现不同的人生

全部回复(3)

ringa_lee2017-04-17 14:43:28 3楼

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

赞 +0

添加回复

ringa_lee2017-04-17 14:43:28 2楼

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

赞 +0

添加回复

迷茫2017-04-17 14:43:28 1楼

我发现是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) { //disabled
                return target;
        }
    }
    return false;
};

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

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>