WordPress - RadioButtons, Checkboxes, and Comboboxes

The html code to produce RadioButtons, Checkboxes, and Comboboxes is well known. The problems occur when you try to connect them to a database.

Specifically, how to indicate which option (or state) was selected when the data was saved.

Overview | create_radiobuttons | create_checkbox | create_combobox | Create the arrays | jQuery


In general, it is better to have both the available options and the selected options stored in the database.

Having the possible radio button and combobox options stored in the database allows you to change these without having to edit the template (php code).

This page presents 3 functions that create RadioButton, Checkbox, and Combobox components based on the parameters passed. In each case, the generated html code is spaced and indented to make it human readable when someone does a view source. (One of my complaints about other peoples code is that the html is not readable without a lot of work.)

One section shows the queries and code used to create the option arrays for the RadioButtons and Comboboxes. There may be better ways to create the arrays (or perhaps it would simply be better to pass an array of objects), but the WordPress and php documentation is crap and I have already spent enough time getting this much to work.

This final section shows how to set the selection using jQuery. I had originally decided to hard code the html and to show the saved values using jQuery. It never worked right - showing the full page for more than 10 seconds before setting the properties. At any rate, I have left the code here for reference.


The idea is to produce a function to produce a radio group from a few parameters.

     <input type="radio" name="location_id" VALUE="BR" CHECKED>BR
     <input type="radio" name="location_id" VALUE="CE">CE
     <input type="radio" name="location_id" VALUE="CP">CP


The idea is to produce a function to produce a combobox from a few parameters.

      Label <input type="checkbox" name="friends" VALUE="1">



The idea is to produce a function to produce a combobox from a few parameters.

      <select name="group" id="group">
        <option value="ygadlt">young adult 
        <option value="chldrn">children
        <option value="specal selected">special

Create the arrays

Display the components (the "database" values are hardcoded for test)


If you want to use a hard coded list of options, jQuery provides a way to set the selected value. Note that #AgeGroup matches the id.

Personally, I prefer to hand code lists to help things line up ... however, I don't like using jQuery.

Author: Robert Clemenzi
URL: http:// mc-computing.com / ISPs / WordPress / RadioButtons.html