jquery mimic checkbox check with an image and use existing checkbox functions

I have a great working function set to check if someone clicks on a checkbox on my page and does a bunch of things. The container that houses the checkbox has an thumbnail image next to it as well and i want to try to figure out a way that i can mimic the same functions that i use when i click the actual checkbox for when i click the image. It should toggle just the same as the checkbox, selecting it and doing all the other actions that it does now:

Here is my current jquery code for the checkbox click function:

// Checkbox Actions - If a Checkbox is checked or not
    $(":checkbox").click(function() {
         var checkedState = $(this).is(':checked');
         var product = $(this).attr("name");
         var newName = '.' + product ;
         var productImg = '.' + product + '-img';

         // Check List Count and Show/Hide Sections
         var currentCount = countChecked();
         if (currentCount == 0) {
             $(newName).css("display", "none");
             $("#noProducts").delay(1).fadeIn(350);
             $("#listContainer").removeClass("listContainerProducts");
             $("#haveProducts").css("display", "none");
             checkIfScrollable();
         }

         // Hide the No Products Container if List Count is Greated than 0
         if (currentCount > 0) {
             $("#noProducts").css("display", "none");
             $("#haveProducts").css("display", "");
             checkIfScrollable();
         }

         // Check the checkbox state and select/show correct items in the List if selected
        if (checkedState == true) {
            var productName = $(this).attr("title");
            var productClassName = $(this).attr("name");
            $("#selectedProductsList").append("<li class=\"productList " + productClassName + "\"><p class=\"removeIcon\"><img src=\"images/remove-icon.png\" alt=\"Remove Product\" /></p><span class=\"productName\">"+ productName +"</span></li>");
            $(".listBoxContainer").fadeIn(350);

            // Change the Image Wrapper to be Selected if checked - Green Border
            $(productImg).addClass("imageBoxTopSelected");
            $("#listContainer").addClass("listContainerProducts");
            $(newName).css("background", "#FFFFFF");
         }

         // If checkbox is not checked
         if (checkedState == false) {
            $(newName).fadeOut(500, function() { $(this).remove()});
            $(productImg).removeClass("imageBoxTopSelected");
            ch开发者_StackOverflow社区eckIfScrollable();
         }
    });

I am aware that my jquery isnt streamline (jquery nobe) but it does what i need.

Just need to figure out a way to mimic the checkbox with the click of the image.

Any ideas? Thanks

I'm not completly certain of what you're asking for. Is it just that you want to trigger a clik event on the checkbox when you've got a click on the image?

$("#mythumb").click(function(){
  // well here the selector is certainly too big, you need to get only 
  // the related checkbox. Maybe you could store a rel="checkboxid" attribute on 
  // the thumb and get it with:
  // var checkid=$(this).attr("rel");
  // or find th checkbox in the DOM near you image with stuff like
  // var mychk = $(":checkbox",$(this).parent('div'));
  $(":checkbox").trigger('click');
  // or
  $(":checkbox").click();
};

Edit: new try (and re-edit as I forgot to use triggerHandler instead of trigger - and the syntax error):

$("#mythumb").click(function(){
  var mychk = $(":checkbox",$(this).parent('div'));
  // toggle checked attribute
  mychk.attr('checked', !mychk.is(":checked"));
  // trigger the click event without effectively clicking.
  // this way the behaviour is the same in old IE and FF
  mychk.triggerHandler('click');
});