layui如何实现监听多个radio事件-创新互联

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

创新互联公司-专业网站定制、快速模板网站建设、高性价比河南网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式河南网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖河南地区。费用合理售后完善，十多年实体公司更值得信赖。

如果 面板信息 不多的话，可以给每个单选框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监听多个radio事件的方法的详细内容，更多请关注创新互联成都网站设计公司其它相关文章！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：layui如何实现监听多个radio事件-创新互联
本文来源：http://shouzuofang.com/article/cocehp.html