jQuery通過點擊父div選擇複選框

Question

這是我想要發生的事情：當我點擊imageContainer div中的複選框時，複選框應該顯示選中狀態。我還添加了一些類來更改所選框的背景顏色和標籤顏色。這部分工作。

我可以點擊imageContainer股利，該div內的複選框被選中。但是，當我直接點擊複選框時，它不會在框中顯示覆選標記。我試過preventDefault,return false和stopPropagation，但沒有運氣。

 <div class="imageContainer" id="question-container-7571"> 
     <img src="/rfs/servicerequest/taskImages/flooring_kitchen.jpg" alt="Flooring"> 
     <div class="l-top-space"> 
      <label for="id_7571_11491">Flooring</label> 
      <div class="l-right"><input id="id_7571_11491" type="checkbox" name="7571" value="11491"></div> 
      <input id="id_7571_11492" type="hidden" name="7571" value="11492"> 
     </div> 
    </div> 

這裏是jQuery的我使用：

jQuery('.imageContainer').toggle(
    function(e) { 
     var imgCont = jQuery(this); 
     imgCont.find('input').prop('checked', true); 
     imgCont.addClass('ic-checked'); 
     imgCont.find('label').addClass('ic-selected'); 
    }, 
    function(e) { 
     var imgCont = jQuery(this); 
     imgCont.find('input').prop('checked', false); 
     imgCont.removeClass('ic-checked'); 
     imgCont.find('label').removeClass('ic-selected'); 
    } 
); 

上什麼，我缺少的將是巨大的任何幫助或建議！

Answer 1

對不起，我花了很長時間才找回來。這裏是我結束的代碼，它可以在我需要的時候運行。點擊周圍的div，標籤或複選框，然後選中複選框並更改周圍div的背景。

jQuery('.imageContainer input:checkbox,.imageContainer label').bind("click",function(e) { 
     e.stopPropagation(); 
    }); 
    jQuery("div.imageContainer input:checkbox").bind("click",function(){ 
     var imageContainerDiv = jQuery(this).closest("div.imageContainer"); 
     var imageContainerInput = jQuery(this); 
     var triggerEl=""; 
     imageContainer(imageContainerDiv,triggerEl); 
    }); 
    jQuery("div.imageContainer").bind("click",function(){ 
     var imageContainerDiv = jQuery(this); 
     var triggerEl=imageContainerDiv; 
     imageContainer(imageContainerDiv,triggerEl); 
    }); 
    function imageContainer(imageContainerDiv,triggerElement){ 
     var imageContainer=jQuery(imageContainerDiv).children("input:checkbox"); 
     var imageCheckbox = jQuery(imageContainerDiv).find("input"); 
     if(triggerElement==imageContainerDiv){ 
     imageCheckbox.prop("checked", !imageCheckbox.prop("checked")); 
     } 
     jQuery(imageContainerDiv).toggleClass("ic-checked"); 
     jQuery(imageContainerDiv).find("label").toggleClass("ic-selected"); 
    } 
}); 

Answer 2

這是因爲，您的點擊從複選框傳播到容器，因此複選框將立即取消選中並重新檢查。您可以添加以下的綁定，以防止：

jQuery('input:checkbox', '.imageContainer').click(function(e){ 
    e.stopPropagation(); 
}); 

但不會觸發您的容器的CSS的變化，所以我會更改您的代碼：

function handleCheckbox(imgCont, checkbox, toggle) { 
     var checked = checkbox.prop("checked"); 
     if (toggle) 
     { 
     checkbox.prop("checked", !checked); 
     checked = !checked; 
     } 
     if (checked) 
     { 
     imgCont.addClass('ic-checked'); 
     imgCont.find('label').addClass('ic-selected'); 
     } 
     else 
     { 
     imgCont.removeClass('ic-checked'); 
     imgCont.find('label').removeClass('ic-selected'); 
     } 
} 
jQuery('.imageContainer').click(function(e){ 
    var eventInitiator = jQuery(e.target); 
    if (eventInitiator.is(":checkbox") || eventInitiator.is("label")) 
     return; 
    var imgCont = jQuery(this); 
    handleCheckbox(imgCont, imgCont.find('input:checkbox'), true); 
}); 
jQuery('input:checkbox', '.imageContainer').change(function(e){ 
    var checkbox = jQuery(this); 
    handleCheckbox(checkbox.closest(".imageContainer"), checkbox, false); 
}); 

Answer 3

試試這個jQuery的改寫（該只需要第一行，如果在頁面加載時可能檢查某些複選框）：

工作fiddle。

/*On page run*/ 
jQuery('.imageContainer input:checked').addClass("ic-checked"); 

/*On click*/ 
jQuery('.imageContainer').click(function(){ 

    var imgCont = jQuery(this); 

    if(imgCont.is('.ic-checked')) { 
    imgCont.find('input').prop('checked', false); 
    imgCont.removeClass('ic-checked'); 
    imgCont.find('label').removeClass('ic-selected'); 

    } else { 

    imgCont.find('input').prop('checked', true); 
    imgCont.addClass('ic-checked'); 
    imgCont.find('label').addClass('ic-selected'); 

    } 

}); 

而不是使用toogle，這似乎在這裏有點濫用的，我只是增加了一個click事件處理程序。

這裏最重要的一點是我不檢查複選框是否被選中。這樣做，同樣的問題會出現（因爲當你點擊複選框，它會被檢查，然後jQuery運行並且發現它被檢查並因此取消選中它）。相反，我會檢查你添加的類是否存在，你只在onCheck時添加。

由於您已經在您的代碼中執行了此addClass，因此可以重複使用，並且不會再添加其他類。