Radio Button Label Image Selection. I want to add border or outline when selected

Question

I am using OpenCart for a Tee Shirt shopping site and I am hiding the radio buttons, and using label images which are displayed to the user. Being a T-Shirt website we have different size T-Shirts for instance S, M, L XL, XXL, 3XL, 4XL and I have little images for each one of the sizes. What I am trying to get to happen is when a user selects as size(one of the radio buttons label images) I would like a border or outline around the image to notify the user that they have selected that item. Many tshirt websites have similar features working on there site.

I have browsed the web and tried several different things and non have worked thus far.

Could you please give me an example or point me in the right direction? Is there a way to do it with just css/html? or is javascript or jquery required?

Also, please remember that this is an Opencart site so the values involved in the buttons, labels, and images are being imported into the document through php.

Here is a link to the page, so you can get an idea of what I am talking about. Being that Opencart is using template files, and anb external css stylesheet I am not sure what code I should post so maybe the url is enough. http://rushedtees.com/AAO%20-%20AMERICAN%20BEAGLE

Thanks for any help in advance.

Answer 1

shirts.on('input', function () {
    shirts.removeClass('product-info .option-image img');
    $(this).addClass('border-class');
})

you should try to remove above code. I think it never does anything because it gets called before the DOM has loaded. Perhaps you intended it to be inside a $(document).ready(function(){})?

---

and add following code in its place

     $(function () {
        $('.option-image').click(function(ev){
           if(ev.target.tagName !== 'IMG') return;
           $('label', $(this)).removeClass('border-class');
           $(ev.target).closest('label').addClass('border-class');
        })
     });

above code highlights a selected <label>. This code uses this event delegation technique.

UPDATE

In order to add class to the <img> instead of <label>, use following code

     $(function () {
        $('.option-image').click(function(ev){
           if(ev.target.tagName !== 'IMG') return;
           $('img', $(this)).removeClass('border-class');
           $(ev.target).addClass('border-class');
        })
     });

Answer 2

I would suggest using some jQuery to grab whatever you click and add a unique class with a border. In other words, when you press an image, you remove the class from all of them, and then apply one to the one you just clicked:

var shirts = $('.product-info .option-image img');
shirts.on('click', function(){
    shirts.removeClass('border-class');
    $(this).addClass('border-class');
});

and remember to add a class in your css:

<style>
.border-class { border:2px solid red; }
</style>