Checkbox field, displaying li with different classes

Question

Nice to see a Stack site for EE. Used S Overflow many times in past, and has always been much help.

Anyhow, heres my first question...

I have a site that lists dog walks. I have a checkbox field for the walks channel. Users submit walks via a safecracker form, and the checkbox field is used for users to select certain features present at the walk.

At the moment I display the field on the single entry view page, using the following...

<strong class="heading">Walk Features:</strong>
                <ul>
                  {walk_features}
                    <li>
                      <span>{item}</span>
                      <a href="{site_url}walk_location_features" target="_blank">Find out more</a>
                    </li>
                  {/walk_features}
                </ul>

This produces me a simple list on front end. Now I want to spice up that list slightly, by having a different icon/image & description for each option (contained within the checkbox field.)

So I need to output (HTML) something like:

<ul class="features">
<li class="option1">
    <h3>Option 1</h3>
    <p>A short description of option one</p>
</li>
<li class="option2">
    <h3>Option 2</h3>
    <p>A short description of option two</p>
</li>
etc

I'm just not quite sure on how to get to that from my checkbox field. I have had P&T checkbox field & Low Options suggested, however I am still unclear as to how I can get it from the current field.

I have over 130 entries which use this field, and was hoping that I could output it directly from the existing field. I could add a new field if necessary, and go through transferring the data, but I obviously would like t avoid that if possible! Any help greatly appreciated! :)

Answer 1

I suggest switching the field over to P&T Checkboxes or Radio Button (if you only want them to select one option). In the settings I would specify an option value separately from it's label:

option_one : Option 1
option_two : Option 2
option_three : Option 3

Then in your template use the option value as the class name:

<ul>
  {walk_features}
    <li class="{option}">
      <span>{option_name}</span>
      <a href="{site_url}walk_location_features" target="_blank">Find out more</a>
    </li>
  {/walk_features}
</ul>

Since you have 130 entries already, I suggest using a SQL query to find/replace all the entries with the new values. Be sure to backup your DB before doing this.

UPDATE
exp_channel_data
SET field_id_X = replace(field_id_X,'Option 1','option_one');

UPDATE To add a short description instead of a link:

<ul>
  {walk_features}
    <li class="{option}">
      <span>{option_name}</span>

      {if "{option}" == "option_one"}
        short description about Option 1
      {/if}

      {if "{option}" == "option_two"}
        short description about Option 2
      {/if}
      ...

    </li>
  {/walk_features}
</ul>