Layui's method of listening to multiple radio events

The requirements are as follows: If you want to select radio button 3, select all the check boxes under radio button 3

If there is not much information in the panel, you can add a fixed listening event to each radio button 3

But in the actual project, there are not only two, but dozens. At this time, you can never bind Define a lay-filter and add a form.on('radio(filter)') event

So here I wrote a general method for monitoring multiple 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('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(); }); }

This Here, the lay-filter of each radio is obtained through the id, and the radio id and lay-filter are set to be the same;

$(data.elem) is the currently monitored DOM element; please note here Look at the page that has been successfully rendered by the browser;

The input element is selected at this time, which is radio button 3, but because layui beautifies the input, the input is not displayed;

Pay attention to the picture below: at this time, the next element of input is the "radio button 3" we see

Be sure to look for it when selecting the element Quasi-element!

This method has the following limitations:

1. You need to manually set the id and lay-filter for each "radio button 3";

2. "Radio button 3" The id and lay-filter of "Box 3" need to be consistent;

3. When obtaining elements, the jQuery method is used to find elements;

4. The method of finding elements needs to be changed according to different page layouts.

Recommended:layui usage tutorial

The above is the detailed content of Layui's method of listening to multiple radio events. For more information, please follow other related articles on the PHP Chinese website!