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，label或复选框，然后选中复选框并更改周围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，因此可以重复使用此类，并且不会再添加其他类。

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

3 个答案: