Javascript get checked radiobutton value

• marathra

• August 9, 2017 at 2:29 pm

I have a feeling this is pretty simple… but I just can’t get it!

How can I get the value of the CHECKED radio button via javascript. I’m trying these but they only pick up when the FIRST option is checked. If any other option is checked it does not trigger

$('#acf-field_55bf6059da1d8').focusout(function () {
	alert ( $(this).val() );
	alert ( $('#acf-field_55bf6059da1d8').val() );
	alert ( $('#acf-field_55bf6059da1d8:checked').val() );
});

I’ve searched round here and online but to no avail. So… any help much appreciated!

• John Huebner

• August 9, 2017 at 10:00 pm

you can probably do something like this

$('[data-key="field_5979fbd93d722"] input[type="radio"]:checked').change(e) {
  alert(e.target.value);
}

if you extend the acf object like I do in these examples https://github.com/Hube2/acf-dynamic-ajax-select-example/tree/master/unique-repeater-checkbox you can do this

alert(e.$el.val());

• marathra

• August 10, 2017 at 4:24 am

Hi John,

Thanks for the suggestion; unfortunately I couldn’t get it to work however.

But I did find a solution. It’s not very elegant and I’m sure there are better ways, but this functions at least:

$('#acf-field_55bf6059da1d8').focusin(function () { alert ("default") });
$('#acf-field_55bf6059da1d8-P').focusin(function () { alert ("default") });
$('#acf-field_55bf6059da1d8-D').focusin(function () { alert ("D") });
$('#acf-field_55bf6059da1d8-NP').focusin(function () { alert ("NP") });

And so on. It means a line for each option of course. And for some reason without specifying the value defaults to the first item.

• John Huebner

• August 10, 2017 at 4:41 am

Is your code inside a jQuery document ready function? You really shouldn’t need to add an action for every radio element, especially if you trying to detect a change in an element. Maybe it’s because I always extend the ACF objects when I’m going to do custom JS for ACF fields.

• marathra

• August 19, 2017 at 10:52 pm

Yes, it’s inside the ready function. I hunted some more and tried various ideas but having an individual focusin for each option is the only way I could find which works.

As I said, it’s not particularly elegant, but it works.