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?

Sarfraz · Accepted Answer · 2010-04-28T17:42:25.440

58

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').

edited Apr 28 '10 at 17:42

answered Apr 28 '10 at 17:35

Sarfraz

377,238
77
533
578

4

@David Murdoch: yeah that's right, you could use `change` though. – Sarfraz Apr 28 '10 at 17:43
1

$.click() does not call when use the keyboard or other control to manipulate the form controls. Click function does not works in all situations. – e-info128 Feb 25 '17 at 00:34

David Murdoch · Answer 2 · 2017-03-07T00:56:01.797

13

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() );
});

edited Mar 07 '17 at 00:56

answered Apr 28 '10 at 17:36

David Murdoch

87,823
39
148
191

4

Can you just do $(this).val()? – n s Mar 04 '14 at 19:17
1

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. – Andrew Surzhynskyi Jun 07 '14 at 09:20
@Applejack : do not change something that is correct, just add another. This is a better answer than `alert( $(this).val() );` – jimjim Nov 08 '16 at 03:52
$.change() does not call when uncheck the radio. This function is realy onCheck. – e-info128 Feb 25 '17 at 00:31
Agree with Applejack, answer should be changed (or downvoted into oblivion because it is wrong ;-) ). See: https://plnkr.co/edit/563jmzFvukpqHlA0HnvC?p=preview . It will trigger when the check-change occurs, but it will always result in the same value. – Adam Plocher Mar 07 '17 at 00:45
@e-info128 unchecking a radio isn't supposed to be a thing... that sorta defeats the purpose of the radio button. – Adam Plocher Mar 07 '17 at 00:49

score 6 · Answer 3 · answered Feb 25 '17 at 00:40

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.

score 1 · Answer 4 · edited Jan 21 '21 at 13:00

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.

score 0 · Answer 5 · edited Aug 22 '18 at 13:25

0

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

edited Aug 22 '18 at 13:25

Bahman Parsa Manesh

2,314
3
16
32

answered Aug 22 '18 at 12:30

mital korat

9
2

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. – jwenting Aug 22 '18 at 13:49

score 0 · Answer 6 · answered Nov 25 '19 at 09:01

0

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

    const radio = $(this);

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

});

answered Nov 25 '19 at 09:01

Lu Blue

335
3
10

Radio button checked event handling

6 Answers6

Linked