CODEWITHSUNDEEP
phpjqueryajax
user1138383
user1138383

Reputation: 115

All values of radio button not get when selected via jQuery?

My jQuery function is this:

$(function() {
     $('#small').click(function() {
             var selectedRB = $('input[name=radioGroup]:checked').val();
         alert(selectedRB);
     });
})

HTML:

<input type="radio" id="small" name="radioGroup" value="small" checked><label for="inpSmall">Small</label><br>

<input type="radio" id="small" name="radioGroup" value="medium"><label for="inpMedium">Medium</label><br>

<input type="radio" id="small" name="radioGroup" value="large"><label for="inpLarge">Large</label><br><br>

I have the problem that I only got first value, small, when I click on other button it does not return a value.

Upvotes: 1

Views: 683

Answers (3)

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

//add some class to your radio buttons like class="someClass"
$(function() {
     $('.someClass').click(function() {     
            var selectedRB = $('input[name=radioGroup]:checked').val();
        alert(selectedRB);
     });
})

Upvotes: 0

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

ID is unique, you can't give the same ID to several elements. Try this:

$('input[name=radioGroup]').change(function() {     
    var selectedRB = $('input[name=radioGroup]:checked').val();
    alert(selectedRB);
 });

Upvotes: 0

dknaack
dknaack

Reputation: 60468

Description

The problem is that you use an id small. Id's must be unique in your document. Use class instead. Check out my sample and this jSFiddle.

The id attribute specifies a unique id for an HTML element (the id attribute value must be unique within the HTML document).

Sample

Html

<input type="radio" class="small" name="radioGroup" value="small" checked><label for="inpSmall">Small</label><br>

<input type="radio" class="small" name="radioGroup" value="medium"><label for="inpMedium">Medium</label><br>

<input type="radio" class="small" name="radioGroup" value="large"><label for="inpLarge">Large</label><br><br>

jQuery

$(function() {
     $('.small').click(function() {

               var selectedRB = $('input[name=radioGroup]:checked').val();
               alert(selectedRB);
       });
})

More Information

Upvotes: 3

Related Questions