jquery mimicチェックボックス画像で確認して既存のチェックボックス機能を使用

Question

私のページ上のチェックボックスをクリックしてたくさんのことをしているかどうかをチェックするように設定しました。チェックボックスが入っているコンテナにはサムネイル画像も表示されていますので、画像をクリックしたときの実際のチェックボックスをクリックしたときと同じ機能を模倣できるようにしたいと考えています。ここで

は、チェックボックスのクリック機能のための私の現在のjQueryのコードです：

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

私は知っていますそれが今ではないこと、それを選択し、チェックボックスのようにちょうど同じを切り替えると、他のすべてのアクションを行う必要があります私のjqueryは流線型ではありませんが（jquery nobe）、それは私が必要とするものです。

画像をクリックするだけでチェックボックスを模倣する方法を理解する必要があります。

アイデア？ありがとうございました

Answer 1

私はあなたが何を求めているのか完全に確信していません。あなたが画像をクリックしたときにチェックボックスでclikイベントを発生させたいだけですか？

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

編集：新しい試み（と私はtriggerHandlerの代わりにトリガーを使用するのを忘れたよう編集を再 - と構文エラー）：

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