How to capture selected radio Button Value?

Question

I am using Jquery

This is my HTML Section

<input type="radio" id="admin" value="admin"/>Admin<br>
<input type="radio" id="superadmin" value="superadmin"/>Super Admin<br>


$(document).ready(function() {
    var selecctedtype = '';
    if (document.getElementById('admin').checked) {
        selecctedtype = 'admin';
    }
    if (document.getElementById('superadmin').checked) {
        selecctedtype = 'superadmin';
    }
    alert(selecctedtype);
});

But i am getting empty alert

This is my jsfiddle

http://jsfiddle.net/kua4tfhd/1/

Could anybody please let me know how to capture it ??

it's normal since none of your radio button is checked when the page is loaded — Mathieu Labrie Parent, Oct 17 '14 at 12:42
You need to have a common name for both the radios elements first then `$('input[name="somename"]:checked').val()`... also need to use a change handler — Arun P Johny, Oct 17 '14 at 12:42
@ArunPJohny , i have tried as mentioned this is my fiddle http://jsfiddle.net/kua4tfhd/7/ but its not working . On click of a submit button i wanted this value . — , Oct 17 '14 at 12:46

dfsq · Answer 1 · 2014-10-17T12:50:15.507

Alert is empty because nothing is selected at the moment the script is executed.

1). If you want your radio buttons to act like radio buttons you must give them the same name:

<input type="radio" name="role" id="admin" value="admin" /> Admin
<input type="radio" name="role" id="superadmin" value="superadmin" /> Super Admin

2). Then you would bind onchange event to detect when user changes selection. To select radio buttons you can use for example specific name selector or/and :radio input selector:

$(':radio[name=role]').change(function() {
    alert(this.value);
});

3). Later when you want to get selected value you can do something like this using :checked selector:

var role = $(':radio[name=role]:checked').val();

Demo: http://jsfiddle.net/kua4tfhd/10/

Your solution is the only one where the radio button functionality actually works (if one is selected the other is deselected). +1 — Mark C., Oct 17 '14 at 12:46

score 1 · Answer 2 · answered Oct 17 '14 at 12:42

1

you have to handle it in click event:

HTML:

<input type="radio" id="admin" class="role" value="admin" />Admin
<br>
<input type="radio" id="superadmin" class="role" value="superadmin" />Super Admin
<br>

JQUERY:

$(document).ready(function () {

    $(".role").click(function () {

        alert($(this).val())
    });
});

answered Oct 17 '14 at 12:42

Ehsan Sajjad

61,834
16
105
160

Thanks , but On click of a submit button i wanted this value . – Oct 17 '14 at 12:47
use this @Kiran : ``alert($(".role[checked='checked']").val());`` or ``alert($(".role:checked").val());`` – Ehsan Sajjad Oct 17 '14 at 12:55
or you can also use: ``alert($("input:radio:checked").val());`` – Ehsan Sajjad Oct 17 '14 at 12:58

score 0 · Answer 3 · edited May 23 '17 at 10:33

0

Try This....

$('input[name=radioName]:checked', '#myForm').val();

Reference..

edited May 23 '17 at 10:33

Community

1
1

answered Oct 17 '14 at 13:01

yogesh

23
1
7

How to capture selected radio Button Value?

3 Answers3

Demo: http://jsfiddle.net/kua4tfhd/10/

HTML:

JQUERY: