Layui の複数のラジオ イベントを聞く方法

#要件は次のとおりです。ラジオ ボタン 3 を選択する場合は、ラジオ ボタン 3 の下にあるすべてのチェック ボックスをオンにします

# #パネルに情報があまりない場合は、各ラジオ ボタンに固定のリスニング イベントを追加できます 3

しかし、実際のプロジェクトでは、2 つだけではなく、数十ものイベントが存在します。決してバインドしない レイフィルターを定義し、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();
            });
        }

This ここで、各無線のレイ フィルタは ID を通じて取得され、無線 ID とレイ フィルタは同じになるように設定されます。

$(data.elem) は現在監視されている DOM 要素です。ここに注意してください。ブラウザで正常にレンダリングされたページを見てください;

この時点ではラジオボタン 3 である input 要素が選択されていますが、layui が入力を美化しているため、入力は表示されません;

下の図に注目してください。この時点で、入力の次の要素は「ラジオ ボタン 3」です。

必ず見てください。要素を選択するときに使用します。 準要素!

この方法には次の制限があります:

1. 各「ラジオ ボタン 3」の ID とレイ フィルターを手動で設定する必要があります;

2. "ラジオbutton 3" 「Box 3」の id とlay-filter は一貫している必要があります;

3. 要素を取得するとき、要素を見つけるために jQuery メソッドが使用されます;

4. メソッド検索要素の数は、さまざまなページ レイアウトに応じて変更する必要があります。

推奨:

layui 使用チュートリアル

以上がLayui の複数のラジオ イベントを聞く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。