Jquery $("#Radiobutton").Change(...) Not Firing During De-Selection

jQuery $(#radioButton).change(...) not firing during de-selection

Looks like the change() function is only called when you check a radio button, not when you uncheck it. The solution I used is to bind the change event to every radio button:

$("#r1, #r2, #r3").change(function () {

Or you could give all the radio buttons the same name:

$("input[name=someRadioGroup]:radio").change(function () {

Here's a working jsfiddle example (updated from Chris Porter's comment.)

Per @Ray's comment, you should avoid using names with . in them. Those names work in jQuery 1.7.2 but not in other versions (jsfiddle example.).

Radio button change event not firing when radio is selected programmatically

Since the change event requires an actual browser event initiated by the user instead of via javascript code. You need to trigger the change event using:

$("#selectradio2").click(function() {
    $("#radio2").prop('checked',true).change(); // or trigger('change')
});

Updated Fiddle

jQuery radio button on change does not work

1. Use a callback or anonymous function block
2. You are using jQuery 1.11 (better to use .on syntax)

Demo: http://jsfiddle.net/abhitalks/e5ByP/2/

$("input[name='article[format]']:radio").on("change", function() { 
    alert('hola'); 
});

Change event not firing when radio button is selected with keyboard

Here is a reliable fix http://evilstreak.co.uk/blog/fixing-change-events-on-radios

And using it this is how you would implement it with your example:
And here is a demo of the code below http://www.jsfiddle.net/uDkdJ/1/
I tested this demo in FF3.6, IE8, Safari5, Chrome7, and Opera10.65

$.fn.fix_radios = function() {
  function focus() {
    if ( !this.checked ) return;
    if ( !this.was_checked ) {
      $( this ).change();
    }
  }

  function change( e ) {
    if ( this.was_checked ) {
      e.stopImmediatePropagation();
      return;
    }
    $( "input[name=" + this.name + "]" ).each( function() {
      this.was_checked = this.checked;
    } );
  }
  return this.focus( focus ).change( change );
}

$(function() {
  $( "input[type=radio]" ).fix_radios();
  $("input[name='my_radio_button']").change(function(){
    if ($("input[@name='my_radio_button']:checked").val() == 'ONE'){
      do_this_stuff(); 
    } else { do_other_stuff(); }
  });
});

RadioButtonList not firing SelectedIndexChanged every time

Since you're open to the idéa of moving the code to the client instead. Remove the OnSelectedIndexChange on your radiobutton to skip the postback. You should be able to do something like this instead:

// Put this in a script-tag.
$(document).ready(function(){
    $('#<%=this.ClientID%>').change(function(){
        var radioBtnId = this.id;
        radconfirm('Are you sure you want to take leave?', function(arg){
            if (arg == true) {
                alert("User has selected Leave.")
            }    
            else {
                var rdlUser = docment.getElementById(radioBtnId);
                var radioButtons = rdlUser.getElementsByTagName('input');
                radioButtons[1].checked = true;
            }
         }
        });
    });
})

Below is a snippet that uses id's without server code.

$('#radio1').change(function(e){  var radioBtnId = this.id;  var $this = $(this);  radconfirm('Are you sure you want to take leave?', function(arg){    // Not really sure what you want to do here...    if (arg == true) {      alert("User has selected Leave.")    }        else {      // Select "Available instead".      $this.siblings('input').prop('checked',true);            // Unselect "Leave"            // With javascript      var rdlUser = document.getElementById(radioBtnId);                    rdlUser.checked = false;            // With jQuery      $this.prop('checked', false);    }  });});    // Mocked for now...function radconfirm(value, callback){  var result = confirm(value);  callback(result);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="radio" name="radios" id="radio1" value="Leave"/> <label for="radio1" >Leave</label><input type="radio" name="radios" id="radio2" value="Available"/> <label for="radio2" >Available</label>

OnChange event handler for radio button (INPUT type=radio) doesn't work as one value

var rad = document.myForm.myRadios;var prev = null;for (var i = 0; i < rad.length; i++) {    rad[i].addEventListener('change', function() {        (prev) ? console.log(prev.value): null;        if (this !== prev) {            prev = this;        }        console.log(this.value)    });}

<form name="myForm">  <input type="radio" name="myRadios"  value="1" />  <input type="radio" name="myRadios"  value="2" /></form>

How to use radio on change event?

You can use this which refers to the current input element.

$('input[type=radio][name=bedStatus]').change(function() {
    if (this.value == 'allot') {
        // ...
    }
    else if (this.value == 'transfer') {
        // ...
    }
});

http://jsfiddle.net/4gZAT/

Note that you are comparing the value against allot in both if statements and :radio selector is deprecated.

In case that you are not using jQuery, you can use the document.querySelectorAll and HTMLElement.addEventListener methods:

var radios = document.querySelectorAll('input[type=radio][name="bedStatus"]');

function changeHandler(event) {
   if ( this.value === 'allot' ) {
     console.log('value', 'allot');
   } else if ( this.value === 'transfer' ) {
      console.log('value', 'transfer');
   }  
}

Array.prototype.forEach.call(radios, function(radio) {
   radio.addEventListener('change', changeHandler);
});

jQuery click event on radio button doesn't get fired

It fires. Check demo http://jsfiddle.net/yeyene/kbAk3/

$("#inline_content input[name='type']").click(function(){
    alert('You clicked radio!');
    if($('input:radio[name=type]:checked').val() == "walk_in"){
        alert($('input:radio[name=type]:checked').val());
        //$('#select-table > .roomNumber').attr('enabled',false);
    }
});

---

Related Topics