Someone knows how can I get all the radiobuttons inside a div? The div has a id as follows

<div id="quest{{ $groups }}" class="quest">

I'm using Laravel, therefore my idea is to get the values inside a div, and put in jQuery something like

 var radios = $("input[type='radio'][id^='quest'"+groups+"]");

But this doesn´t work, so I want to know how to get all the radiobuttons inside a div an do a loop inside using .each I think.

I need to duplicate one group of questions and then be able to do a validation, but only works for the first group, the second group is not validated and I´ve checked the id value for each radiobutton and change to previousid_2, and the questionnaire is cloned. Also I want to know how can I reset the values when I clone the questionnaire, because if you have select YES NO YES NO, in the second group when you clone it, those results are selected and the disabled fields too.

Someone knows how can I get all the radiobuttons inside a div? The div has a id as follows

<div id="quest{{ $groups }}" class="quest">

I'm using Laravel, therefore my idea is to get the values inside a div, and put in jQuery something like

 var radios = $("input[type='radio'][id^='quest'"+groups+"]");

But this doesn´t work, so I want to know how to get all the radiobuttons inside a div an do a loop inside using .each I think.

I need to duplicate one group of questions and then be able to do a validation, but only works for the first group, the second group is not validated and I´ve checked the id value for each radiobutton and change to previousid_2, and the questionnaire is cloned. Also I want to know how can I reset the values when I clone the questionnaire, because if you have select YES NO YES NO, in the second group when you clone it, those results are selected and the disabled fields too.

• javascript
• jquery
• html
• laravel

3 Answers 3

You're actually asking for several things. Your code implies you have access to the current group in a variable called groups. so...

1) select all radio inputs within a div:

   var div = $("div#quest"+groups);
   var radiosBtns = div.find("input[type='radio']");

2) Loop over them, and do some work on each element:

var doSomeWork = function(i,radiobtn){
    console.log('the value of radio button #' + i ' is ' + radiobtn.value);
};
$.each(radioBtns,doSomeWork);

3) Duplicate a group of radio buttons:

var fromgroup = $("div#quest"+groups);
var togroup = fromgroup.clone();
var insertionPoint = $('body');
var toGroupId = 'questXXX';

// set the ID so it can be targetted 
togroup.prop('id',toGroupId);
// reset radio button values
togroup.find('input[type="radio"]').each(function(){
    this.prop('checked',false);
});
togroup.appendTo(insertionPoint);

4) Run validation on a specific group

var validateGroup = function(elements){
    // your validation logic goes here
    var isValid = false;
    $.each(function(){
        console.log( this.name, this.value );
    });
    return isValid;
};
// run the validation on the newly inserted group
var targetElements = $("#"+toGroupId).find("input[type='radio']");
var groupIsValid = validateGroup( targetElements );

You can get all radio buttons and iterate on them like following

$("input[type='radio'][id^='quest']").each(function(){
       // add your logic here
});

it's very simple using Id's To get all the elements starting with "quest" you should use:

$("[id^=quest]")

To get those that end with "jander"

$("[id$=quest]")

and the plete answer is

var radios = $("input[type='radio'][id^='quest']");

the point is what if you want to wildcard class :( :(

 $("[class^=quest]")

on a dom like

<pre>
   <a class="btn quest primary">link</a>
<pre>

it won't work , thus you will need a more plex wildcard that you have to till me when you find it :D

the fact is you will not need it , whenever you need to get a list of element using classes just use a mon class :D hope i helped u well