Sure, you can do this with a little jQuery customization. Each radio button is in it's own list item with a specific class. By targeting that class and using jQuery's "insertBefore" goodness, you can insert a new list item/node into the list and add a "sub label" if you will to break up the list into more manageable sections.
test screenshot: http://i.imgur.com/5E8Yk3x.jpg
I basically recreated the list from the reference site on a test form, then used a HTML field at the end of the form to add my script and CSS. (that's a nifty trick too if you haven't used it before) Of course, this script is specific to my form (ID's and classes) but you can take it and modify it to use for your form. Just update the classes and IDs appropriately.
<script>
jQuery("<li><h4 class='sublabel'>Battery Chargers</h4></li>").insertBefore(".gchoice_2_0");
jQuery("<li><h4 class='sublabel'>Battery Isolators</h4></li>").insertBefore(".gchoice_2_2");
jQuery("<li><h4 class='sublabel'>Inverters</h4></li>").insertBefore(".gchoice_2_4");
jQuery("<li><h4 class='sublabel'>Isolation Protection</h4></li>").insertBefore(".gchoice_2_9");
jQuery("<li><h4 class='sublabel'>Optics</h4></li>").insertBefore(".gchoice_2_11");
jQuery("<li><h4 class='sublabel'>Marine Accessories</h4></li>").insertBefore(".gchoice_2_12");
</script>
<style type="text/css">
h4.sublabel {color: #790000; border-bottom: 1px solid #ccc; width: 100%; padding-bottom:6px;}
li#field_20_2 {margin-top: 24px;}
</style>
and to make it easier to see what I'm talking about, I exported the sample form and put it here for you to download, import and tinker with if you would like.
https://www.box.com/shared/static/wd3c0c9s40heterm7yu8.xml
Hope that helps out. Best of luck with it.
Posted 11 years ago on Saturday June 1, 2013 |
Permalink