Question

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");
            checkIfScrollable();
         }
    });

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

Answer 1

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');
});