layui怎么监听多个radio事件?

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

1.png

如果 面板信息 不多的话,可以给每个单选框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没有显示;

2.png

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

3.png

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

此方法有以下局限性:

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

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

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

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


推荐文章
layui封装模块基础教程

layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己的模块,本教程就教大家封装一个简单的模块。平常使用中,ajax可以说使用广泛,所以这里我们添加一

layui兼不兼容ie8?

layui兼不兼容ie8?layui兼容ie8,layui兼容人类正在使用的全部浏览器(IE6/7除外),可作为PC端后台系统与前台界面的速成开发方案。layui(谐音:类UI)是一款采用自身模块规范

layui中如何获取表格全部数据?

layui中获取表格全部数据第一步可以通过layui.table.cache["testReload"]的方式来获取表格全部数据,其中testReload是表格id第二步打开网页,我们可以看一下要获取

如何让layui支持es5?写法介绍

写js的时候会写一些es5的代码,但是打包到dist时,发现不支持语法,怎么办呢。两步添加es5支持:一、使用npm下载安装babel,进入gulpfile.js所在目录。$npminstall--s

详解layui模块化与非模块化的不同引用方式

layui模块化与非模块化的不同引用方式:1、模块化与非模块化的区别layui中有许多不同的内置模块,如弹出层、日期与时间选择器、分页等不同模块。模块化:使用时加载相应的模块。非模块化:一次性加载所有

layui如何关闭弹出层?

layui可以使用closeAll关闭弹出层,如果不指向层类型的话,它会销毁掉当前页所有的layer层。我们可以使用下面的方法关闭指定层:layer.closeAll();//疯狂模式,关闭所有层la

前端layui框架快速上手

一、介绍在使用layui之前,我们先要了解一下layui是什么?我觉得用作者贤心的一句话来概括就好了:为后端程序员设计的前端框架。更加详细的描述是:这是一个封装了各种css和js、Ajax等等的前端框

layui如何实现表格反转?简单实现方式介绍

表格反转,或者叫行列转换,估计都不陌生,先看效果图:测试页面:https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled相对标

layui table组件常见用法总结

table是layui最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头

详解layui.layer独立组件

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,laye

layui表格中怎么显示图片?

layui的表格使用还是非常简单的,layui文档中已经非常详细,下面直接上代码了1、jsp代码 发布Banner 2、然后是js代码layui.use('table',function()

浅谈layui中table的sort排序

今天来谈谈tablesort的那点事。预告一下,目的是做到前台排序还有服务器排序区分开,目前的table的分页实际是比较“乱”的,相信很多用的有一段时间的特别是做server排序的同学都会多多少少遇到

layui中关于弹出层关闭和刷新问题

描述:主页面,弹出第一个弹框,第一个弹框中在弹出第二个弹框,如图:1是主页面,2是子弹窗,3是孙弹窗功能一:好了,第一个我要实现的功能是点击弹窗3的确定之后关闭弹窗3上js代码,先贴出如何在主页面1中

浅谈layui前端遇到的难点(集合)

一、表格中插入下拉框的情况问题:表格遇到下拉框表单的情况,下拉框在表格中没办法显示出来,效果:1、表格中下拉框被隐藏----方法1这种方法解决了表格中下拉框被隐藏的状态了,但是显示并不是很美观,距离最

layuiadmin是什么呀?

layuiAdmin是一种采用layui自建的纯前端MVC架构而成的后台模板系统开发框架,而不仅限于模板。layuiAdmin全面接管视图和路由,并自主完成数据渲染,服务端只负责数据接口,因此这赋予了

浅谈layui表单中的inline和block

layui表单中的inline和block:block:block元素会独自占一行,多个block元素各自新起一行,默认情况下,block元素宽度自动填充其父元素宽度 单行输入框 验证必填项

如何用layui实现图片上传?

layui上传功能的实现:一、前往官网下载layui的框架打开html文件,引用其中的layui.css和layui.js二、调用前端的html代码,设置id值。 上传图片   layui

layui怎么设置时间选择框?

Layui中时间格式的输入框:html代码: 选择日期: -- - js代码:layui.use(['layer','form','table','laydate'],function()

layui开源么?

layui是免费开源的,layui是开源的模块化前端UI框架,而layAdmin和layIm是付费授权的。layui是一款采用自身模块规范编写的前端UI框架,遵循原生HTML/CSS/JS的书写与组织

浅谈layui标签输入框inputTags

layui标签输入框inputTags样式:目录结构:页面代码: inputTags layui.config({ base:'js/