Question

这是我的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
  });
});

我知道如何在检查后单击按钮删除复选框。但我不知道如何恢复它？任何人都可以帮助我这个演示来自小提琴DEMO FIDDLE

Answer 1

根据您的上一条评论："un-check them and don't show it. When click button show it will be shown all again"，此解决方案可以解决问题：

$(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>

上述解决方案很简单，但我认为它可以满足您的需求。

Answer 2

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

Answer 3

尝试使用.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")
        }
    });
});

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

Answer 4

Here使用.show（）和.hide（）的工作解决方案。

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

Answer 5

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

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

5 个答案: