https://legacy.forums.gravityhelp.com/topic/checkboxes-as-images-with-highlight Gravity Support Forums Topic: Checkboxes as images with highlight? en-US Mon, 20 Apr 2026 03:24:55 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/checkboxes-as-images-with-highlight#post-25862 Wed, 18 May 2011 16:17:05 +0000 David Smith 25862@https://legacy.forums.gravityhelp.com/ <p>Hi Yourguide,</p> <p>1) It really depends on what you want to do. Adding the selected class is just one concept of a way that would allow you to style selected items differently than unselected items. Here is another concept where the items are faded out until selected: <a href="http://dl.dropbox.com/u/689144/gfsupport/checkboxes-as-images-with-highlight.htm" rel="nofollow">http://dl.dropbox.com/u/689144/gfsupport/checkboxes-as-images-with-highlight.htm</a></p> <p>2) This is javascript/jquery code. This documentation will be helpful in determining where to place this code: <a href="http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F" rel="nofollow">http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F</a></p> <p>3) jQuery is available as part of WP and enqueued by Gravity Forms. You should not need to load it separately. </p> https://legacy.forums.gravityhelp.com/topic/checkboxes-as-images-with-highlight#post-25740 Tue, 17 May 2011 16:00:27 +0000 yourguide 25740@https://legacy.forums.gravityhelp.com/ <p>Cool...<br /> 3 Easy questions for you:</p> <p>I just need a "selected" css class for my items that does something to them?<br /> Where would I put that code?<br /> Do I need to install jQuery or is it part of wordpress?<br /> Thanks! </p> https://legacy.forums.gravityhelp.com/topic/checkboxes-as-images-with-highlight#post-25689 Tue, 17 May 2011 11:28:34 +0000 David Smith 25689@https://legacy.forums.gravityhelp.com/ <p>Hi guys,</p> <p>If you're using the current version of Gravity Forms then you can add images to the product option labels via HTML:</p> <p>&lt;img src="/path/to/your/image.jpg" /&gt;</p> <p>To update the image, you'll probably want to use some jQuery. Here is some sample jQuery code that adds a 'selected' class to the containing<br /> li. This could be used to style the selected differently to indicate that it has been selected. You can use this code as a base if you'd like to change the URL of the image.<br /> <a href="http://pastie.org/1916756" rel="nofollow">http://pastie.org/1916756</a> </p> https://legacy.forums.gravityhelp.com/topic/checkboxes-as-images-with-highlight#post-25683 Tue, 17 May 2011 11:07:58 +0000 yourguide 25683@https://legacy.forums.gravityhelp.com/ <p>Sorry... I renamed the page... it is now at: <a href="http://rockitoutbb.com/custom-tutu/" rel="nofollow">http://rockitoutbb.com/custom-tutu/</a> </p> https://legacy.forums.gravityhelp.com/topic/checkboxes-as-images-with-highlight#post-25666 Tue, 17 May 2011 02:16:10 +0000 chris 25666@https://legacy.forums.gravityhelp.com/ <p>I would like to see an answer to this also </p> https://legacy.forums.gravityhelp.com/topic/checkboxes-as-images-with-highlight#post-25644 Mon, 16 May 2011 18:16:13 +0000 yourguide 25644@https://legacy.forums.gravityhelp.com/ <p>New to Gravity Forms... LOVE it so far... this is an awesome plugin no wordpress site should be without. Thank YOU!</p> <p>What I am trying to do is create a custom order form where instead of checkboxes, I use images of my items, I would like the user to just click on the image, and that would highlight that item, in a sense, checking the box.<br /> I would like to be able to click on the item again to de-select it.<br /> Its for a custom order form where users can select multiple colors that will go into the item they are ordering.<br /> I then need to style all these images so they show up right next to each other in rows so it's easy to just click on the colors you want, then continue.<br /> I will be integrating this form into Cart66 to process orders.<br /> You can see what I have so far over here: <a href="http://rockitoutbb.com/tulle-colors/" rel="nofollow">http://rockitoutbb.com/tulle-colors/</a><br /> Any and all suggestion welcomed!<br /> Thanks! </p>