Checking radio button with jQuery doesn't trigger radio's onclick event

Question

I have a pair of radios, to which I assign a function using bind(), on the pages .ready event. then, on the same ready event, I check for another input's value, and if it's value is "1" I preselect the second radio button when the page loads. here is a snippet.

<input type="radio" name="fpago" id="fpago1" value="1" />one
<input type="radio" name="fpago" id="fpago2" value="2" />two

...

$(document).ready(function() {
    $("#myspan").hide();

    $("#fpago1, #fpago2").bind('change click',function(){
        togglePlazo();
    });

//initial condition to preselect radio #2
    grupo = $("#id_grupo").val();
    if(grupo != '0'){
        $("#fpago2").attr('checked', true); //checks the radio, but doesn't trigger function
    }

});

...

--> see here for a more complete code

The problem is that, the radio does get checked if the condition is met, BUT the bound function togglePlazo() doesn't trigger...

If later I manually click the radio buttons, the function does get triggered, and the span toggles. It is only on the initial "check" made with jQuery, where the function does not trigger despite the radio getting changed.

I don't know what I'm missing, maybe I should bind more events other than change or click... I just can't find what I am doing wrong.

NOTE: I am using jQuery 1.4.2, but the fiddle is set to use 1.6.4 (it doesn't have 1.4.2 as an option)

does it show the "bla bla" text just by loading the page? because it DOES change if you MANUALLY click the radios. What doesn't work, is to show the span's text by default when loading the page (without even touching anything). If it works, you should be some kind of sorcerer! XD because it just doesn't. (or what browser are you using? although I doubt is relevant) — DiegoDD, Oct 23 '13 at 17:57

score 45 · Accepted Answer · edited Oct 23 '13 at 18:21

45

Just trigger the click event when you set the checked attribute.

$("#fpago2").attr('checked', true).trigger('click');

Changing an attribute on the element doesn't fire a changed event... Neither by the native setAttribute or using jQuery's attr.

edited Oct 23 '13 at 18:21

DiegoDD

1,625
4
21
32

answered Oct 23 '13 at 15:33

adamb

4,815
1
25
40

I know I can do that (or `.click()`, which is the same), But I want to know WHY it doesn't trigger it by default, since the event is already bound to the radio. – DiegoDD Oct 23 '13 at 15:57
Changing an attribute on the element doesn't fire a `changed` event... Neither by the native `setAttribute` or using jQuery's `attr`. – adamb Oct 23 '13 at 16:04
So whenever I need to trigger some event for any element, i need to explicitly call the handler or event? Or if instead of radios, it was a select, it would work? (not sure, but i guess it would, because I'd assign the value with .val() instead of changing an attribute). Is there a way to force events to trigger when assigning attributes, not only values? I mean, for all elements, without needing to trigger the events manually for each one as you mention. – DiegoDD Oct 23 '13 at 18:02
Trying to set a radio/checkbox with `val()` will not trigger a change event (or do anything for that matter). The way to detect attribute changes like these is with a [DOM mutation observer](http://stackoverflow.com/a/14570614/1538708) - But for this that would be overkill. – adamb Oct 23 '13 at 18:10
This works in Chromium, but not in FF (at least not for me). But click, set checked, and click again, finally did. Strange. – maaartinus Jul 01 '14 at 04:43
3

More recently we would use prop as `$("#fpago2").prop('checked', true).trigger('click');` – Mark Schultheiss Aug 03 '15 at 04:30
@MarkSchultheiss @MarkSchultheiss actually in my case (Chrome 67 / jQuery 3.2.1) doing `$el.prop('checked', true).trigger('click')` didn't fire a change listener. I had to explicitly do: `$el.prop('checked', true).trigger('click').trigger('change')` to fire the change listener. This resulted in the change listener being fired even for cases when no actual change happened so I had to account for that inside the logic of the listener. – Marcus Junius Brutus Aug 16 '18 at 21:39
1

@MarcusJuniusBrutus - yes, the key to my comment was use `prop()` not `attr()`, even though I agree with your use of the `change` event - that all depends on how your handler was set up (which events you monitor) or both as the OP did with the `bind` (use `.on('change click',...` instead of `bind()` BTW. – Mark Schultheiss Aug 17 '18 at 11:08

score 1 · Answer 2 · edited Dec 24 '22 at 21:10

1

$('input:radio[name="fpago"]')
  .filter(`[value="1"]`)
  .prop('checked', true)
  .trigger("change");

edited Dec 24 '22 at 21:10

Tyler2P

2,324
26
22
31

answered Dec 23 '22 at 15:34

Thao Nguyen

11
2

1

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Dec 25 '22 at 00:26

score 0 · Answer 3 · edited Jun 22 '21 at 08:21

0

If you write console.log('yes'); inside imageTypeToggle function and you will see on page load in console yes will not print. you need to trigger like below

$(function () {
    $(window).load(function(){
    $("[name=image_type]").on("change",imageTypeToggle).trigger('click');
 })

edited Jun 22 '21 at 08:21

a.ak

659
2
12
26

answered Jun 22 '21 at 06:58

boy108zon

15
6

Checking radio button with jQuery doesn't trigger radio's onclick event

3 Answers3

Linked