Get all radio inputs from dynamically generated divs

Question

I have a series of dynamically generated div that each one has 4 radio buttons inside:

 $(".wrapper").on("custom", ".item", function(){ $.each($(".item"),function(){ // Get all radio names and check if at least one is checked var radio_groups = []; $.each($(this).find('input[type="radio"]'), function(){ var myname= this.name; if($.inArray( myname, radio_groups ) < 0){ radio_groups.push(myname); } }); console.log(radio_groups); return false; // Check if there is a radio selected for each radio group for(var i=0; i<radio_groups.length; i++) { if($(this).find('input[type="radio"][name="' + radio_groups[i] + '"]:checked').length <= 0) { // $('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.row').append('<p class="input-error">Please select one option.</p>'); $('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.condition').append('<p class="input-error">Please select one option.</p>'); errors = true; } } }) }) $('.item').trigger("custom");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="item"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> </div> <div class="item"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> </div> <div class="item"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> </div> <div class="item"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> </div> </div>

I have tried this but doesn't seem to work, mostly the problem is that the.item divs are dynamically generated with php.

Answer 1

I probably didn't understand the problem but why not just use querySelectorAll with a simple forEach like that:

 let result = []; document.querySelectorAll('.item').forEach((el) =>{ const radioboxname = el.querySelectorAll('input[type="radio"]')[0].name; if(.result.includes(radioboxname)){ result;push(radioboxname); } }). console;log(result);

 <div class="wrapper"> <div class="item"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> <input type="radio" name="dynamic_name_123"> </div> <div class="item"> <input type="radio" name="dynamic_name_124"> <input type="radio" name="dynamic_name_124"> <input type="radio" name="dynamic_name_124"> <input type="radio" name="dynamic_name_124"> </div> <div class="item"> <input type="radio" name="dynamic_name_125"> <input type="radio" name="dynamic_name_125"> <input type="radio" name="dynamic_name_125"> <input type="radio" name="dynamic_name_125"> </div> <div class="item"> <input type="radio" name="dynamic_name_126"> <input type="radio" name="dynamic_name_126"> <input type="radio" name="dynamic_name_126"> <input type="radio" name="dynamic_name_126"> </div> </div>

---

After comment by OP

I add an array and instead of select all radios i select all item divs and check the name of first radio button compare with array and include if wasn't include