需求如下圖：想要選中單選框3，是單選框3下的復(fù)選框全選

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比河南網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式河南網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋河南地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。

如果 面板信息 不多的話，可以給每個單選框3添加一個固定的監(jiān)聽事件

但是實際項目中，不僅僅只有兩個，會有幾十個，這時總不能綁定一個lay-filter，添加一個form.on('radio(filter)')事件吧

所以在此寫了一個通用的監(jiān)聽多個radio的方法：

// 選取“單選框3”，“單選框3”下的所有內(nèi)容全選
        var flagID = document.querySelectorAll("input[title='單選框3']");
        var aFlagID = new Array();
        for (var j = 0; j < flagID.length; j++) {
            aFlagID.push(flagID[j].id);
        }
        // 監(jiān)聽所有title為“單選框3”的radio
        // 注意：此時title為“單選框3”的radio的id和lay-filter需要設(shè)為一致?。。?！
        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設(shè)置成一樣的；

$(data.elem)就是當(dāng)前監(jiān)聽的DOM元素；這里要注意看瀏覽器已經(jīng)渲染成功的頁面；

此時選中的是input元素，即為單選框3，但是由于layui將input美化掉了，所以此input沒有顯示；

注意看下圖：此時input下一個元素才是我們看到的“單選框3”

在選取元素的時候一定要找準(zhǔn)元素！

此方法有以下局限性：

1.需要手動給每個“單選框3”設(shè)置id和lay-filter；

2.“單選框3”的id和lay-filter需要一致；

3.獲取元素時是通過jQuery方法尋找元素；

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

以上就是layui監(jiān)聽多個radio事件的方法的詳細(xì)內(nèi)容，更多請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司其它相關(guān)文章！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：layui如何實現(xiàn)監(jiān)聽多個radio事件-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://www.aaarwkj.com/article48/cocehp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、軟件開發(fā)、手機網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、App開發(fā)、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)