jquery mimic checkbox mit einem Bild überprüfen und vorhandene checkbox Funktionen

Question

Ich habe eine große funktionierende Funktion gesetzt, um zu prüfen, ob jemand auf ein Kontrollkästchen auf meiner Seite klickt und eine Menge Dinge tut. Der Container, in dem sich das Kontrollkästchen befindet, hat daneben auch ein Miniaturbild, und ich möchte versuchen, einen Weg zu finden, mit dem ich die gleichen Funktionen nachahmen kann, wenn ich auf das eigentliche Kontrollkästchen klicke, wenn ich auf das Bild klicke. Es sollte genau das gleiche wie das Kontrollkästchen wechseln, es auswählen und alle anderen Aktionen zu tun, dass es jetzt tut:

Hier ist meine aktuellen jQuery-Code für die Funktion Checkbox klicken:

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

ich weiß, dass meine jquery ist nicht stromlinienförmig (jquery nobe), aber es tut, was ich brauche.

Nur müssen Sie eine Möglichkeit, das Kontrollkästchen mit dem Klick auf das Bild nachzuahmen.

Irgendwelche Ideen? Danke

Answer 1

Ich bin nicht ganz sicher, wonach Sie fragen. Möchtest du nur ein Clik-Ereignis in der Checkbox auslösen, wenn du auf das Bild klickst?

$("#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: neuen Versuch (und re- bearbeiten wie ich vergessen triggerHandler statt Trigger zu verwenden - und die Syntaxfehler):

$("#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'); 
});