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，因此可以重复使用，并且不会再添加其他类。