首頁  >  文章  >  web前端  >  layui監聽多個radio事件的方法

layui監聽多個radio事件的方法

尚
轉載
2019-12-13 17:06:003976瀏覽

layui監聽多個radio事件的方法

需求如下圖:想要選取單選方塊3,是單選方塊3下的複選框全選

layui監聽多個radio事件的方法

#如果面板資訊不多的話,可以為每個單選框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(&#39;radio(&#39;+aFlagID[i]+&#39;)&#39;, function(data) {
                $(data.elem).next().next().children("input").addClass(""+aFlagID[i]+"_other");
                $("."+aFlagID[i]+"_other").attr("checked", "checked");
                $("."+aFlagID[i]+"_other + div").addClass(&#39;layui-form-checked&#39;);
                element.init();
            });
        }

此處,是透過id來取得每個radio的lay-filter,將radio的id與lay-filter設定成一樣的;

$(data.elem)就是目前監聽的DOM元素;這裡要注意看瀏覽器已經渲染成功的頁面;

此時選取的是input元素,也就是單選框3,但由於layui將input美化掉了,所以此input沒有顯示;

layui監聽多個radio事件的方法注意看下圖:此時input下一個元素才是我們看到的「單選框3」

layui監聽多個radio事件的方法

在選取元素的時候一定要找準元素!

此方法有以下限制:

1.需要手動為每個「單選框3」設定id和lay-filter;

2.「單選框3」的id和lay-filter需要一致;

3.取得元素時是透過jQuery方法尋找元素;

4.需要依照不同的頁面佈局變更尋找元素的方式。

 推薦:layui使用教學

#

以上是layui監聽多個radio事件的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除