视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
layui监听多个radio事件的方法
2020-11-03 18:22:26 责编:小采
文档


需求如下图:想要选中单选框3,是单选框3下的复选框全选

如果 面板信息 不多的话,可以给每个单选框3添加一个固定的监听事件

但是实际项目中,不仅仅只有两个,会有几十个,这时总不能绑定一个lay-filter,添加一个form.on('radio(filter)')事件吧

所以在此写了一个通用的监听多个radio的方法:

// 选取“单选框3”,“单选框3”下的所有内容全选
 var flagID = document.querySelectorAll("input[title='单选框3']");
 var aFlagID = new Array();
 for (var j = 0; j < flagID.length; j++) {
 aFlagID.push(flagID[j].id);
 }
 // 监听所有title为“单选框3”的radio
 // 注意:此时title为“单选框3”的radio的id和lay-filter需要设为一致!!!!
 for (var i = 0; i < aFlagID.length; i++) {
 form.on('radio('+aFlagID[i]+')', function(data) {
 $(data.elem).next().next().children("input").addClass(""+aFlagID[i]+"_other");
 $("."+aFlagID[i]+"_other").attr("checked", "checked");
 $("."+aFlagID[i]+"_other + div").addClass('layui-form-checked');
 element.init();
 });
 }

此处,是通过id来获取每个radio的lay-filter,将radio的id与lay-filter设置成一样的;

$(data.elem)就是当前监听的DOM元素;这里要注意看浏览器已经渲染成功的页面;

此时选中的是input元素,即为单选框3,但是由于layui将input美化掉了,所以此input没有显示;

注意看下图:此时input下一个元素才是我们看到的“单选框3”

在选取元素的时候一定要找准元素!

此方法有以下局限性:

1.需要手动给每个“单选框3”设置id和lay-filter;

2.“单选框3”的id和lay-filter需要一致;

3.获取元素时是通过jQuery方法寻找元素;

4.需要按照不同的页面布局变更寻找元素的方式。

推荐:layui使用教程

下载本文
显示全文
专题