Handling One Radio Button With JavaScript

Today, I discovered an issue that I have probably encountered in the past; but it’s been so long I forgot about it. I had some JavaScript set up to select a radio button based on text input, and then update the text based on the selected radio button (it’s a TinyMCE plugin that inserts a shortcode into the WordPress visual editor). Throughout all of the testing I performed, everything worked just fine. Today, though, someone else was testing the interface and could not get the text or the radio button to update properly.

After a bit of testing and messing around with the interface, I finally discovered that my JavaScript wasn’t recognizing the existence of the radio button on the form. After a bit more testing, I realized that’s because only one radio button existed; and JavaScript doesn’t treat radio buttons as arrays when there’s only one instance. When I had been testing before, I had multiple radio buttons, so everything worked; but now there was only one button, so it fell over.

jQuery – How to Tell if a Checkbox is Checked

Quite often, I find myself in a situation where I need to change the content of a form based on which checkboxes or radio buttons in a group are checked. I used to do this by adding an onclick and/or onchange event to each individual checkbox or radio button and then running a function to figure out whether or not the changed element was checked.

Then, I discovered how easy it is to do all of this on-the-fly with jQuery.