layui 怎么监听多个 radio 事件? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
需求如下图: 想要选中单选框 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. 需要按照不同的页面布局变更寻找元素的方式.
更多 web 前端课程 https://www.html.cn/ 的相关知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/framework/layui/18020.html