jQuery:如何在删除复选框后回调/恢复

jQuery: How to callback/restore after remove checkbox

本文关键字：回调 恢复 复选框 删除 jQuery      更新时间：2023-09-26

这是我的html代码：

<div class="foo">
 <label class="checkbox-wrapper">
       One<input type="checkbox" value="1" />
 </label>
 <label class="checkbox-wrapper">
       Two<input type="checkbox" value="1" />
 </label>
 <label class="checkbox-wrapper">
       Three<input type="checkbox" value="1" />
 </label>
 <label class="checkbox-wrapper">
       Four<input type="checkbox" value="1" />
 </label>
</div>    
<button class="btn btn-default btn-block slight" id="allFinished">Remove checked</button>
<button class="btn btn-default btn-block slight" id="show">Show</button>

这是我的jQuery代码：

$(document).ready(function(){
  $('#allFinished').on("click", function(){
      $(".checkbox-wrapper").each(function(){           
          if($(this).find("input[type=checkbox]").prop("checked")){ $(this).remove(); } 
      });
  });
  $('#show').on("click", function(){
      //I don't know what must I fill this
  });
});

我知道如何在选中并单击按钮后删除复选框。但我不知道如何再次恢复？任何人都可以帮我这个演示来自小提琴演示fiddle

根据您的最后一条评论："取消选中它们，不显示它。当单击按钮显示它时，它将再次显示"，此解决方案应该做到这一点：

$(document).ready(function(){
  $('#allFinished').on("click", function(){
      $('.checkbox-wrapper input[type="checkbox"]:checked').prop('checked', false).parent().hide();
  });
  $('#show').on("click", function(){
      $('.checkbox-wrapper:hidden').show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
 <label class="checkbox-wrapper">
       One<input type="checkbox" value="1" />
 </label>
 <label class="checkbox-wrapper">
       Two<input type="checkbox" value="1" />
 </label>
 <label class="checkbox-wrapper">
       Three<input type="checkbox" value="1" />
 </label>
 <label class="checkbox-wrapper">
       Four<input type="checkbox" value="1" />
 </label>
</div>    
<button class="btn btn-default btn-block slight" id="allFinished">Remove checked</button>
<button class="btn btn-default btn-block slight" id="show">Show</button>

上面的解决方案很简单，但我认为它符合您的要求。

您无法恢复已删除的节点。因此，您可以在启动remove操作时隐藏它，或者将节点复杂性保存在克隆的变量中，然后使用appendChild或设置html内容等方法注入它。

当附加到父元素时，尝试使用.filter()、.find()、.add()、Array.prototype.sort()将元素重置为原始索引

$(document).ready(function () {
  var clone;
  $('#allFinished').on("click", function () {
      var checked = $('.checkbox-wrapper').filter(":has(:checked)")
                    .find(":checked").prop("checked", false).parent().remove();
      // if elements already removed , add current removed element to `clone` stack
      if (clone) {
        clone = clone.add(checked)
      // else set `clone` to initial element removed
      } else {
        clone = checked
      }        
    });
    $('#show').on("click", function () {
        if (clone) {
          var elems = $(".foo label").add(clone)
          .toArray()
          .sort(function(a, b) {
            return $("input", a)[0].name < $("input",b)[0].name ? 0 : 1 
          });
          $(".foo").html(elems);
          // set `clone` to `undefined`
          clone = void 0;
        } else {
           console.log("no checked inputs removed")
        }
    });
});

jsfiddlehttps://jsfiddle.net/3askfpam/9/

这里是一个使用.show（）和.hide（）.的工作解决方案

$(".checkbox-wrapper").each(function(){
  if($(this).find("input[type=checkbox]").prop("checked")){                         
     $(this).show(); 
  } 
});

您应该隐藏并禁用复选框，这样您的服务器端脚本就不会"获取"值。至少在php中，它不会

相关文章：