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

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

You need to simplify this code to single out just the question you are asking, getting rid of any other non-relevant stuff. — Marcus Whybrow
– Marcus Whybrow, Commented Jan 7, 2011 at 21:48
@Marcus Whybrow: I didnt think this was as important since i want to reuse all of the actions that happen now in this click of a checkbox on the page. There is not one section that i can remove. — estern
– estern, Commented Jan 7, 2011 at 21:51

regilero · Accepted Answer · 2011-01-08 13:13:39Z

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

edited Jan 8, 2011 at 13:13

answered Jan 7, 2011 at 21:54

regilero

30.7k6 gold badges65 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

estern Over a year ago

I have an image that i want to click in a div. This div also houses a checkbox that triggers the whole function that i have placed in the question. I want the same actions to happen when i click on the image. It will check the box and then invoke the same functions that happen with that. Does that clarify it at all?

regilero Over a year ago

so uncomment the last line of comments and the last line becomes mychk.trigger('click');

estern Over a year ago

It is strange. It is triggering something but not what happens normally when you click the checkbox next to it. A lot of funky stuff happens.

regilero Over a year ago

how, yes. With checkbox there's sometime problems with ':checked' states on 'click' trigger, depending on the browser the checkbox will be already checked or not yet. Try a simple mychk.click() instead.

estern Over a year ago

Yah same effect is happening with that click call.

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related