Get checked Radio Button and Selected Drop down values using Jquery

Question

I have a Radio Buttons for Gender and Drop down for Courses,

I have Dynamic values in Jquery.

How can I get the selected options in both Gender and Courses.

I am providing my Code here too:

HTML:

Male <input type="radio" name="gender" id="male" value="1"> - 

Female <input type="radio" name="gender" id="female" value="2"> 

<br>

<select name="courses" id="courses">
    <option value="0">Choose Courses</option>
    <option value="1">PHP</option>
    <option value="2">Jquery</option>
    <option value="3">HTML</option>
</select>

JS:

$(function() {
    //these are the values I got, these values are dynamic
    var gender = 2;
    var course = 3; 

}

super · Accepted Answer · 2013-10-30 08:49:43Z

2

GET

$("input[type='radio']").val();// get radio box value
$("#courses").val();// get dropdown with id "courses value

SET

$("input[type='radio'][value=2]").attr("checked","checked");// set radio box value with checked propety
$("#courses").val(3);// set dropdown with id "courses value

you can also get value when you change value by

$("input[type='radio'],#courses").change(function(){
    alert($(this).val());
});

SEE UPDATED DEMO

edited Oct 30, 2013 at 8:49

super

2,3282 gold badges21 silver badges23 bronze badges

answered Oct 30, 2013 at 6:31

Rituraj ratan

10.4k8 gold badges38 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hassan Sardar Over a year ago

No no i dont want values, i want to make it selected using Jquery.

Hassan Sardar Over a year ago

Radio is not selected

Hassan Sardar Over a year ago

Can you do the same with radio on Id bases ? cz i have multiple radios

super Over a year ago

@Code Hunter Id must be unique for html elements, use the name property or add a class to the radio buttons and select them by using that class.

Hassan Sardar Over a year ago

Can you do it with name or class ?

super · Accepted Answer · 2013-11-05 09:41:25Z

1

Try this one:

Html:

Male <input type="radio" name="gender" id="male" value="1" class="gender"/>         
Female <input type="radio" name="gender" id="female" value="2" class="gender"/>

Script: SET:

 var gender = 2;
 var course = 3;     
 $(".gender").val(gender).prop('checked', true);
 //$(".gender").val(gender).attr('checked', true);
 $("#courses").val(course);

GET:

 $(".gender:checked").val();
 $("#courses").val();

Change event:

$(".gender,#courses").change(function(){
    alert($(this).val());
});

Demo:
Select radio using class.

Select radio by name.

With change event.

Using attr instead of prop.

edited Nov 5, 2013 at 9:41

answered Oct 30, 2013 at 6:42

super

2,3282 gold badges21 silver badges23 bronze badges

2 Comments

Hassan Sardar Over a year ago

Prop is a new function. And i m using lod library of Jquwey, what is the alternate of prop ? Can u do it with out Prop

super Over a year ago

attr is the alternate for prop. I've updated my answer check the demo.

Ankit Tyagi · Accepted Answer · 2013-10-30 06:42:28Z

0

var gender = 2;
var course = 3;

$('input:radio').eq(gender-1).prop('checked', true);

$('select').val(course);

answered Oct 30, 2013 at 6:42

Ankit Tyagi

2,37511 silver badges20 bronze badges

Comments

jazZRo · Accepted Answer · 2013-10-30 08:19:23Z

0

var gender = 2;
var course = 3;

$('input:radio[name="gender"]').filter('[value="' + gender + '"]').attr('checked', true);
$("#courses").val(course);

answered Oct 30, 2013 at 8:19

jazZRo

1,6081 gold badge16 silver badges20 bronze badges

Collectives™ on Stack Overflow

Get checked Radio Button and Selected Drop down values using Jquery

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related