Question

I’m trying to write a piece of code which use the user choice in a form.
The code should give an alert window with the name of the radio selected but doesn’t work, it only show the A alert either A is selector or B is selected.
This is the form

<FORM>
<input type="radio" name="search_type" value="A"/>type A<br/>
<input type="radio" name="search_type" value="B"/>type B<br/>
</FORM>

and this is the js code

$(document).ready(function(){
    $('input:radio[name="search_type"]').change(function() {
        if ($('input:radio[name="search_type"]').val() == 'A'){
                alert('type A');
        };
        if ($('input:radio[name="search_type"]').val() == 'B'){
                alert('type B');
        };
    });
});

Here you can find the running code: http://jsfiddle.net/ur7cc/
Can anybody please tell me why it isn’t working?
Thanks!

Answer 1

You need to use with :checked selector for .val() when dealing with radio/checkbox. Alternatively you can use $(this).val() where this is basically the radio that triggered the change. See below,

$(document).ready(function(){
    $('input:radio[name="search_type"]').change(function() {
        if ($(this).val() == 'A'){
                alert('type A');
        }
        if ($(this).val() == 'B'){
                alert('type B');
        }
    });
});

To use with :checked selector,

$('input:radio[name="search_type"]:checked').val()

DEMO: http://jsfiddle.net/skram/ur7cc/1/