Question

我正在研究各种图像选择器。我们的想法是拥有一个可以通过checkbox选择的图像列表。如果用户单击图像（位于标签元素内），则会选中该复选框，并将该元素（图像）克隆到另一个名为#selected-items的文件中。

尝试通过取消选中元素（再次单击图像）删除选择后出现问题。只需两次单击即可取消选中该复选框。第一次单击会从#selected-items中删除克隆元素，但必须再次单击以取消选中该复选框。

我正在尝试取消选中该选项，只需单击一下即可删除克隆的元素。有什么想法吗？

<div id="selected-items"><span></span></div>
<div class="field-widget-outfit-builder">
 <div class="form-type-checkbox">
   <input class="form-checkbox" type="checkbox"/>  
   <label>
     <img typeof="Image" src="" width="100" height="100"/>
     <div class="checkmark"></div>
   </label>
 </div>
</div>



$(".form-checkbox", context).live("click", function() {     
  var container = $(this).closest(".field-widget-outfit-builder");
  var checkbox = $(this).parent().find("input");
    if(checkbox.attr('checked')) {
       container.find(':checked').next().find('.checkmark').addClass('selected');
       container.find(':checked').next().find('img').addClass('opacity20');
       $(this).parents('.form-type-checkbox').clone()
              .appendTo("#selected-items").addClass("cloned")
              .append('<div class="remove"></div>');
       $("#selected-items").find("span").hide();
    } 
    else {
       $(this).attr('checked', false);
       $(this).closest(".cloned").remove();
       $(this).parents('.form-type-checkbox')
              .find('.checkmark').removeClass('selected');
       $(this).parents('.form-type-checkbox').find('img')
              .removeClass('opacity20');
    }
});

Answer 1

逻辑是当取消选中克隆元素中的复选框时，您应该可以访问原始复选框，以便可以将其checked设置为false，使用该逻辑您必须将引用保存到原始复选框作为克隆复选框的一些属性。然后你的问题就会解决。另请注意，您必须使用prop来获取和设置checked属性，而不是使用attr。

更新了代码：

$(".form-checkbox").live("click", function() {
  var container = $(this).closest(".field-widget-outfit-builder");
  var checkbox = $(this).parent().find("input");

  if(checkbox.prop('checked')) {
    container.find(':checked').next().find('.checkmark').addClass('selected');
    container.find(':checked').next().find('img');
    //save the checkbox into the property originCheck
    $(this).parents('.form-type-checkbox').clone()
                .appendTo("#selected-items").addClass("cloned")
                .append('<div class="remove"></div>')
                .find('input')[0].originCheck = checkbox;
    $("#selected-items").find("span").hide();
  }  else if($(this).parent().hasClass('cloned')) { 
     //set the checked on the clicked checkbox together with the original one 
     //to false
     $(this).add($(this.originCheck)).prop('checked', false);       
     $(this).closest(".cloned").remove();
     $(this).parents('.form-type-checkbox')
            .find('.checkmark').removeClass('selected');       
  }
});

只有在单击两次后才会取消选中复选框

1 个答案:

Updated Demo.