jQuery 通过单击父 div 选择复选框

Question

这是我想要发生的事情：当我点击imageContainer div 中的复选框时，复选框应该显示为选中状态。我还添加了一些类来更改选定框的背景颜色和标签颜色。这部分正在工作。

我可以单击imageContainer div 并且该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

这是因为，您的点击会从复选框传播到容器，因此复选框将立即取消选中并重新选中。您可以添加以下绑定来防止这种情况发生：

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 2

抱歉，我花了这么长时间才回来。这是我最终得到的代码，它可以按我的需要工作。单击周围的 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 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，在这里似乎有点误用，我只是添加了一个点击事件处理程序。

这里最重要的一点是我不检查复选框是否被选中。这样做，会出现同样的问题（因为当您单击复选框时，它被选中，然后 jQuery 运行并发现它被选中，因此再次取消选中它）。相反，我会检查您添加的类是否存在，您仅在 onCheck 时添加。

由于您已经在代码中执行了这个 addClass，因此可以重复使用它并且不再添加其他类。