javascript - if...radio is checked alert - Stack Overflow

admin管理员组

文章数量:1323157

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: / Can anybody please tell me why it isn't working? Thanks!

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/ur7cc/ Can anybody please tell me why it isn't working? Thanks!

• javascript
• jquery
• if-statement
• radio-button

Share Follow edited Jun 11, 2012 at 21:21 JohnFx 34.9k1818 gold badges107107 silver badges166166 bronze badges asked Jun 11, 2012 at 21:19 NicolaesseNicolaesse 2,7241313 gold badges5151 silver badges7676 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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/skram/ur7cc/1/

use $(this) instead. Here is a simplified version.

$(document).ready(function(){
    $('input:radio[name="search_type"]').change(function() {
        alert("Type: "+$(this).val());
    });
});
​

DEMO: http://jsfiddle/ur7cc/2/

This is a working code that I wrote and tested. It works. It writes out the status of the checkbox in a different one. Give it a shot. It worked for me.

<input type="radio" onclick="alert(this.name);" name="A"/> button A<br>
<input type="radio" onclick="alert(this.name);" name="B"/> button B<br>

I hope it helps!

The $('input:radio[name="search_type"]') selector returns an array object. You are overplicating this. No need to use it again. Here is much simpler method using the retrieved object:

$(document).ready(function(e) {

 $('input:radio[name="search_type"]').change(function() {
    alert ("type "+$(this).val());
  })
})

本文标签： javascriptifradio is checked alertStack Overflow