Shulou(Shulou.com)06/03 Report--

Editor to share with you how layui monitors multiple radio events, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

The requirements are as follows: if you want to select checkbox 3, select all checkboxes under checkbox 3.

If the panel does not have much information, you can add a fixed listening event to each radio box 3

But in the actual project, there are not only two, there will be dozens, so you can't bind a lay-filter. Add a form.on ('radio (filter)') event.

So a general method of listening to multiple radio is written here:

/ / Select "checkbox 3", select all contents under "checkbox 3" var flagID = document.querySelectorAll ("input [title=' checkbox 3']"); var aFlagID = new Array (); for (var j = 0; j < flagID.length; jigger +) {aFlagID.push (roomID [j] .id) } / / listen for all radio whose title is "Radiobox 3". Note: at this time, the id and lay-filter of radio with title of "Radiobox 3" need to be set to the same! For (var I = 0; I < aFlagID.length; iTunes +) {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 ();});}

Here, the lay-filter of each radio is obtained through id, and the id of radio is set to the same as lay-filter

$(data.elem) is the DOM element that is currently being listened to. Here you should pay attention to the pages that have been successfully rendered by the browser.

The input element, radio box 3, is selected, but because layui beautifies the input, the input is not displayed

Pay attention to the following figure: at this point, the next element of input is what we see as "checkbox 3".

Be sure to find the right element when selecting the element!

This method has the following limitations:

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

2. The id and lay-filter of "checkbox 3" need to be the same.

3. When you get an element, you look for it through the jQuery method.

4. You need to look for elements according to different page layout changes.

The above is all the content of the article "how layui monitors multiple radio events". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.