hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

layui监听多个radio事宜的要领_WEB前端开发

2019-12-14后端开发ki4网26°c
A+ A-

需求如下图:想要选中单选框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运用教程

以上就是layui监听多个radio事宜的要领的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
layui监听多个radio事宜的要领_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>