Maison  >  Article  >  interface Web  >  La méthode de Layui pour écouter plusieurs événements radio

La méthode de Layui pour écouter plusieurs événements radio

尚
avant
2019-12-13 17:06:003953parcourir

La méthode de Layui pour écouter plusieurs événements radio

Les conditions requises sont les suivantes : Si vous souhaitez sélectionner le bouton radio 3, cochez toutes les cases sous le bouton radio 3

La méthode de Layui pour écouter plusieurs événements radio

S'il n'y a pas beaucoup d'informations dans le panneau, vous pouvez ajouter un événement d'écoute fixe à chaque bouton radio 3

Mais dans le projet lui-même, il n'y en a pas seulement deux, mais des dizaines, et vous ne pouvez pas le lier à cette fois. Définissez un filtre lay et ajoutez un événement form.on('radio(filter)')

J'ai donc écrit ici une méthode générale pour surveiller plusieurs radios :

// 选取“单选框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();
            });
        }

This Here. , le filtre lay de chaque radio est obtenu via l'identifiant, et l'identifiant de la radio et le filtre lay sont définis pour être les mêmes

$(data.elem) est l'élément DOM actuellement surveillé ; ici Regardez la page qui a été rendue avec succès par le navigateur ;

L'élément d'entrée est sélectionné à ce moment, qui est le bouton radio 3, mais comme layui embellit l'entrée, cette entrée n'est pas affichée

Faites attention à l'image ci-dessous : le prochain élément d'entrée à ce moment-là est le "bouton radio 3" que nous voyons La méthode de Layui pour écouter plusieurs événements radio

La méthode de Layui pour écouter plusieurs événements radio

Assurez-vous de rechercher lors de la sélection de l'élément Quasi-élément !

Cette méthode présente les limitations suivantes :

1. Vous devez définir manuellement l'identifiant et le filtre lay pour chaque "Radio Box 3" ;

2. Box 3" L'identifiant et le filtre lay de "Box 3" doivent être cohérents ;

3. Lors de l'obtention d'éléments, la méthode jQuery est utilisée pour trouver des éléments ;

4. La manière pour trouver les éléments, il faut les modifier en fonction des différentes mises en page.

Recommandé :

Tutoriel d'utilisation de Layui

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer