Radio button checked event handling

Question

In my application, I need a radio group, in which whenever a radio-button is checked, an alert occur so that I can post it's value to ajax post with jQuery.

Can you help me please how i can do it in jQuery?

Row

Answer 1

Try something like this:

$(function(){
  $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
    {
      alert($(this).val());
    }
  });
});

If you give your radio buttons a class then you can replace the code $('input[type="radio"]') with $('.someclass').

Kyser

@David Murdoch: yeah that's right, you could use change though. – Kyser

$.click() does not call when use the keyboard or other control to manipulate the form controls. Click function does not works in all situations. – Swanee

Answer 2

Update in 2017: Hey. This is a terrible answer. Don't use it. Back in the old days this type of jQuery use was common. And it probably worked back then. Just read it, realize it's terrible, then move on (or downvote or, whatever) to one of the other answers that are better for today's jQuery.

---

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

Royall

Can you just do $(this).val()? – Upthrow

It took me a while to understand what $("input[type=radio][name="+ this.name + "]").val() is doing here. Can you please edit your post and change it to alert( $(this).val() ); I suppose that was a reason of down votes. – Haunt

@Applejack : do not change something that is correct, just add another. This is a better answer than alert( $(this).val() ); – Denton

$.change() does not call when uncheck the radio. This function is realy onCheck. – Swanee

Agree with Applejack, answer should be changed (or downvoted into oblivion because it is wrong ;-) ). See: plnkr.co/edit/563jmzFvukpqHlA0HnvC?p=preview . It will trigger when the check-change occurs, but it will always result in the same value. – Undercover

@Swanee unchecking a radio isn't supposed to be a thing... that sorta defeats the purpose of the radio button. – Undercover

Answer 3

The HTML code:

<input type="radio" name="theName" value="1" id="option-1">
<input type="radio" name="theName" value="2">
<input type="radio" name="theName" value="3">

The Javascript code:

$(document).ready(function(){
    $('input[name="theName"]').change(function(){
        if($('#option-1').prop('checked')){
            alert('Option 1 is checked!');
        }else{
            alert('Option 1 is unchecked!');
        }
    });
});

In multiple radio with name "theName", detect when option 1 is checked or unchecked. Works in all situations: on click control, use the keyboard, use joystick, automatic change the values from other dinamicaly function, etc.

Swanee

Answer 4

You can simply use the method change of JQuery to get the value of the current radio checked with the following code:

$(document).on('change', '[type="radio"]', function() {
    var currentlyValue = $(this).val(); // Get the radio checked value
        
    alert('Currently value: '+currentlyValue); // Show a alert with the current value
});

You can change the selector '[type="radio"]' for a class or id that you want.

Fairchild

Answer 5

$("#expires1").click(function(){
     if (this.checked)
        alert("testing....");
});

Bakker

however correct this may be, without an explanation as to why it's the answer it's not going to teach anything. And with the question in question over 8 years old, that doesn't make it at all helpful. – Originality

Answer 6

$(document).on('change','.radio-button', function(){

    const radio = $(this);

    if (radio.is(':checked')) {
      console.log(radio)
    }

});

Nymphet