> 웹 프론트엔드 > 레이이 튜토리얼 > 여러 라디오 이벤트를 듣는 레이이의 방법

여러 라디오 이벤트를 듣는 레이이의 방법

풀어 주다: 2019-12-13 17:06:00
앞으로
4027명이 탐색했습니다.

여러 라디오 이벤트를 듣는 레이이의 방법

요구사항은 다음과 같습니다. 라디오 버튼 3을 선택하려면 라디오 버튼 3 아래의 확인란을 모두 선택하세요.

#🎜 🎜#여러 라디오 이벤트를 듣는 레이이의 방법

패널 정보가 많지 않으면 각 라디오 버튼에 고정 청취 이벤트를 추가할 수 있습니다. 3

하지만 실제 프로젝트에는 두 개만 있는 것이 아니고, 수십 개가 있을 것입니다. 이때는 레이필터를 바인딩할 수 없습니다. 단지 form.on('radio(filter)') 이벤트만 추가하면 됩니다.

그래서 여기에 일반 청취 기능을 작성했습니다. 각 라디오에 대한 방법:

// 选取“单选框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();
            });
        }
로그인 후 복사

여기서 각 라디오의 Lay-filter는 id를 통해 얻어지며 라디오 ID와 Lay-filter는 동일하게 설정됩니다.

#🎜🎜 #$(data.elem)은 현재 모니터링되는 DOM 요소입니다. 여기서는 브라우저에서 성공적으로 렌더링된 페이지에 주의해야 합니다.

이번에는 입력 요소가 선택됩니다. 라디오 버튼 3, 그러나layui가 입력을 아름답게 하기 때문에 이 입력은 표시되지 않습니다.

아래 그림에 주의하세요. 이때 입력의 다음 요소는 "라디오"입니다. 버튼 3"이 보입니다.# 🎜🎜#

여러 라디오 이벤트를 듣는 레이이의 방법

선택 시 올바른 요소를 찾으세요! 여러 라디오 이벤트를 듣는 레이이의 방법

이 방법에는 다음과 같은 제한 사항이 있습니다.

1. 각 "라디오 버튼 3"에 대해 ID와 누워 필터를 수동으로 설정해야 합니다.

#🎜 🎜 #2. "라디오 버튼 3"의 ID와 레이어 필터는 일치해야 합니다.

3 요소를 가져올 때 요소는

#🎜 🎜#4. 따라야 할 사항 페이지 레이아웃이 다르면 요소를 찾는 방식이 달라집니다.

추천:

layui 사용 튜토리얼

위 내용은 여러 라디오 이벤트를 듣는 레이이의 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:cnblogs.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿