jQuery-删除：点击检查道具

Question

如果单击编辑图标（.toggle），将看到checkboxes。

我需要的内容：如果选中了一个复选框checked，然后单击了.toggle（以隐藏这些复选框），则应取消选中所有复选框。有点像清除您的选择。

$(document).ready(function() {
  $(".select-all").on("click", function() {
    $(this).is(":checked") ?
      $(".select-input")
      .prop("checked", true)
      .change() :
      $(".select-input")
      .prop("checked", false)
      .change();
  });
  $("input[name='select-check']:checkbox").change(function() {
    if ($(this).is(":checked")) {
      if (!$(this).is(".select-all") &&
        $("input[name='select-check']:checkbox:not(:checked):not(.select-all)")
        .length == 0
      ) {
        $(".select-all").prop("checked", true);
      }
      $(this)
        .closest(".shrink")
        .addClass("active")
        .prev(".selectall-btn")
        .addClass("active");
      $(".deleteSelected").removeClass("disabledbutton");
    } else {
      if (!$(this).is(".select-all")) {
        $(".select-all").prop("checked", false);
      }
      $(this)
        .closest(".shrink")
        .removeClass("active")
        .prev(".selectall-btn")
        .removeClass("active");
      if ($("input[name='select-check']:checkbox:checked").length == 0) {
        $(".deleteSelected").addClass("disabledbutton");
      }
    }
  });
});
$(".toggle").on("click", function() {
  if ($(".selectall-btn").hasClass("hidden"))
    $(".selectall-btn")
    .removeClass("hidden")
    .addClass("slideup"),
    $(".post-item").addClass("slidedown");
  else
    $(".selectall-btn")
    .removeClass("slideup")
    .addClass("hidden"),
    $(".post-item").removeClass("slidedown");
  $(".shrink").removeClass("active");

  $(".toggle i").toggleClass("fa-edit fa-times");
  $(".pick-select").toggleClass("hidden");
});

var btncolor = $("input[name='select-check']:checkbox");
btncolor.on("change", function() {
  $(".deleteSelected").toggleClass("active", btncolor.is(":checked"));
});

.active-btn {
  color: red;
}

.selectall-btn {
  margin: 5px;
}

.pick-select {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.shrink {
  height: 50px;
  width: 150px;
  border: 3px solid;
  position: relative;
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.deleteSelected.active {
  color: red;
}

.shrink.active {
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  border: 2px solid red;
}

.selectall-label {
  display: inline-block;
  cursor: pointer;
  position: relative;
}

.selectall-label span {
  display: inline-block;
  position: relative;
  background-color: transparent;
  width: 15px;
  height: 15px;
  transform-origin: center;
  border: 2px solid silver;
  border-radius: 50%;
  vertical-align: -6px;
  margin-right: 10px;
  transition: background-color 150ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}


/*input[name="select-check"] {
  display: none;
}*/

input[name="select-check"]:checked+label span,
.selectall-btn.active label>span {
  background-color: blue;
  border-color: blue;
  transform: scale(1.25);
}

.post-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#list {
  display: flex;
  flex-direction: column
}

.hidden {
  display: none;
}

.disabledbutton {
  pointer-events: none;
  opacity: 0.4;
}

.toggle {
  cursor: pointer
}

.slideup {
  -webkit-animation: slide-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-iteration-count: 1;
}

.slidedown {
  -webkit-animation: slide-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-iteration-count: 1;
}

@keyframes slide-top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slide-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 1;
  }
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-wrap">
  <div class="toggle"><i class="select-fa fa fa-edit"></i></div>
  <div class="controls">
    <div class="selectall-btn hidden">
      <input type="checkbox" id="selectall" class="select-all" name="select-check" />
      <label class="selectall-label" for="selectall"><span></span>Select All
</label>
    </div>
    <div class="deleteSelected disabledbutton"><i class="fa fa-trash"></i>
    </div>
  </div>
</div>
<div class="post-list" id="list">
  <div class="new-li">
    <div class="post-item" id="item0">
      <div class="selectall-btn w-embed hidden">
        <label class="selectall-label" for="post-select"><span></span>
</label>
      </div>
      <div class="shrink">
        <div class="select-block">
          <label class="pick-select hidden">
<input id="post-select" type="checkbox" class="select-input" name="select-check">
</label> new
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" id="item1">
    <div class="selectall-btn w-embed hidden">
      <label class="selectall-label" for="post-select1"><span></span>
</label>
    </div>
    <div class="shrink">
      <div class="select-block">
        <label for="post-select1" class="pick-select hidden">
<input id="post-select1" type="checkbox" class="select-input" name="select-check">
</label> 1
      </div>
    </div>
  </div>
  <div class="post-item" id="item2">
    <div class="selectall-btn w-embed hidden">
      <label class="selectall-label" for="post-select2"><span></span>
</label>
    </div>
    <div class="shrink">
      <div class="select-block">
        <label for="post-select2" class="pick-select hidden">
<input id="post-select2" type="checkbox" class="select-input" name="select-check">
</label> 2
      </div>
    </div>
  </div>
</div>

Answer 1

您只需要删除所有checked属性和active类即可。

通过添加

$('input:checkbox').removeAttr('checked');
$('.selectall-btn').removeClass("active");
$('.deleteSelected').removeClass("active").addClass("disabledbutton");

进入$(".toggle").on()。

$(document).ready(function() {
  $(".select-all").on("click", function() {
    $(this).is(":checked") ?
      $(".select-input")
      .prop("checked", true)
      .change() :
      $(".select-input")
      .prop("checked", false)
      .change();
  });
  $("input[name='select-check']:checkbox").change(function() {
    if ($(this).is(":checked")) {
      if (!$(this).is(".select-all") &&
        $("input[name='select-check']:checkbox:not(:checked):not(.select-all)")
        .length == 0
      ) {
        $(".select-all").prop("checked", true);
      }
      $(this)
        .closest(".shrink")
        .addClass("active")
        .prev(".selectall-btn")
        .addClass("active");
      $(".deleteSelected").removeClass("disabledbutton");
    } else {
      if (!$(this).is(".select-all")) {
        $(".select-all").prop("checked", false);
      }
      $(this)
        .closest(".shrink")
        .removeClass("active")
        .prev(".selectall-btn")
        .removeClass("active");
      if ($("input[name='select-check']:checkbox:checked").length == 0) {
        $(".deleteSelected").addClass("disabledbutton");
      }
    }
  });
});
$(".toggle").on("click", function() {
  $('input:checkbox').removeAttr('checked');
  $('.selectall-btn').removeClass("active");
  $('.deleteSelected').removeClass("active").addClass("disabledbutton");
  if ($(".selectall-btn").hasClass("hidden"))
    $(".selectall-btn")
    .removeClass("hidden")
    .addClass("slideup"),
    $(".post-item").addClass("slidedown");
  else
    $(".selectall-btn")
    .removeClass("slideup")
    .addClass("hidden"),
    $(".post-item").removeClass("slidedown");
  $(".shrink").removeClass("active");

  $(".toggle i").toggleClass("fa-edit fa-times");
  $(".pick-select").toggleClass("hidden");
});

var btncolor = $("input[name='select-check']:checkbox");
btncolor.on("change", function() {
  $(".deleteSelected").toggleClass("active", btncolor.is(":checked"));
});

.active-btn {
  color: red;
}

.selectall-btn {
  margin: 5px;
}

.pick-select {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.shrink {
  height: 50px;
  width: 150px;
  border: 3px solid;
  position: relative;
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.deleteSelected.active {
  color: red;
}

.shrink.active {
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  border: 2px solid red;
}

.selectall-label {
  display: inline-block;
  cursor: pointer;
  position: relative;
}

.selectall-label span {
  display: inline-block;
  position: relative;
  background-color: transparent;
  width: 15px;
  height: 15px;
  transform-origin: center;
  border: 2px solid silver;
  border-radius: 50%;
  vertical-align: -6px;
  margin-right: 10px;
  transition: background-color 150ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}


/*input[name="select-check"] {
  display: none;
}*/

input[name="select-check"]:checked+label span,
.selectall-btn.active label>span {
  background-color: blue;
  border-color: blue;
  transform: scale(1.25);
}

.post-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#list {
  display: flex;
  flex-direction: column
}

.hidden {
  display: none;
}

.disabledbutton {
  pointer-events: none;
  opacity: 0.4;
}

.toggle {
  cursor: pointer
}

.slideup {
  -webkit-animation: slide-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-iteration-count: 1;
}

.slidedown {
  -webkit-animation: slide-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-iteration-count: 1;
}

@keyframes slide-top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slide-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 1;
  }
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-wrap">
  <div class="toggle"><i class="select-fa fa fa-edit"></i></div>
  <div class="controls">
    <div class="selectall-btn hidden">
      <input type="checkbox" id="selectall" class="select-all" name="select-check" />
      <label class="selectall-label" for="selectall"><span></span>Select All
</label>
    </div>
    <div class="deleteSelected disabledbutton"><i class="fa fa-trash"></i>
    </div>
  </div>
</div>
<div class="post-list" id="list">
  <div class="new-li">
    <div class="post-item" id="item0">
      <div class="selectall-btn w-embed hidden">
        <label class="selectall-label" for="post-select"><span></span>
</label>
      </div>
      <div class="shrink">
        <div class="select-block">
          <label class="pick-select hidden">
<input id="post-select" type="checkbox" class="select-input" name="select-check">
</label> new
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" id="item1">
    <div class="selectall-btn w-embed hidden">
      <label class="selectall-label" for="post-select1"><span></span>
</label>
    </div>
    <div class="shrink">
      <div class="select-block">
        <label for="post-select1" class="pick-select hidden">
<input id="post-select1" type="checkbox" class="select-input" name="select-check">
</label> 1
      </div>
    </div>
  </div>
  <div class="post-item" id="item2">
    <div class="selectall-btn w-embed hidden">
      <label class="selectall-label" for="post-select2"><span></span>
</label>
    </div>
    <div class="shrink">
      <div class="select-block">
        <label for="post-select2" class="pick-select hidden">
<input id="post-select2" type="checkbox" class="select-input" name="select-check">
</label> 2
      </div>
    </div>
  </div>
</div>

Answer 2

这是您要寻找的疯子吗？

$(document).ready(function() {
  $(".select-all").on("click", function() {
    $(this).is(":checked") ?
      $(".select-input")
      .prop("checked", true)
      .change() :
      $(".select-input")
      .prop("checked", false)
      .change();
  });
  $("input[name='select-check']:checkbox").change(function() {
    if ($(this).is(":checked")) {
      if (!$(this).is(".select-all") &&
        $("input[name='select-check']:checkbox:not(:checked):not(.select-all)")
        .length == 0
      ) {
        $(".select-all").prop("checked", true);
      }
      $(this)
        .closest(".shrink")
        .addClass("active")
        .prev(".selectall-btn")
        .addClass("active");
      $(".deleteSelected").removeClass("disabledbutton");
    } else {
      if (!$(this).is(".select-all")) {
        $(".select-all").prop("checked", false);
      }
      $(this)
        .closest(".shrink")
        .removeClass("active")
        .prev(".selectall-btn")
        .removeClass("active");
      if ($("input[name='select-check']:checkbox:checked").length == 0) {
        $(".deleteSelected").addClass("disabledbutton");
      }
    }
  });
});
$(".toggle").on("click", function() {
  if ($(".selectall-btn").hasClass("hidden"))
    $(".selectall-btn")
    .removeClass("hidden")
    .addClass("slideup"),
    $(".post-item").addClass("slidedown");
    
  else
    $(".selectall-btn")
    .removeClass("slideup")
    .addClass("hidden"),
    $(".post-item").removeClass("slidedown");
  $(".shrink").removeClass("active");

  $(".toggle i").toggleClass("fa-edit fa-times");
  $(".pick-select").toggleClass("hidden");
  
  // New two lines added here
  $('input[type=checkbox]:checked').prop('checked',false);
  $(".selectall-btn").removeClass('active');
  
});

var btncolor = $("input[name='select-check']:checkbox");
btncolor.on("change", function() {
  $(".deleteSelected").toggleClass("active", btncolor.is(":checked"));
});

.active-btn {
  color: red;
}

.selectall-btn {
  margin: 5px;
}

.pick-select {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.shrink {
  height: 50px;
  width: 150px;
  border: 3px solid;
  position: relative;
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.deleteSelected.active {
  color: red;
}

.shrink.active {
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  border: 2px solid red;
}

.selectall-label {
  display: inline-block;
  cursor: pointer;
  position: relative;
}

.selectall-label span {
  display: inline-block;
  position: relative;
  background-color: transparent;
  width: 15px;
  height: 15px;
  transform-origin: center;
  border: 2px solid silver;
  border-radius: 50%;
  vertical-align: -6px;
  margin-right: 10px;
  transition: background-color 150ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}


/*input[name="select-check"] {
  display: none;
}*/

input[name="select-check"]:checked+label span,
.selectall-btn.active label>span {
  background-color: blue;
  border-color: blue;
  transform: scale(1.25);
}

.post-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#list {
  display: flex;
  flex-direction: column
}

.hidden {
  display: none;
}

.disabledbutton {
  pointer-events: none;
  opacity: 0.4;
}

.toggle {
  cursor: pointer
}

.slideup {
  -webkit-animation: slide-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-iteration-count: 1;
}

.slidedown {
  -webkit-animation: slide-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation-iteration-count: 1;
}

@keyframes slide-top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slide-bottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 1;
  }
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-wrap">
  <div class="toggle"><i class="select-fa fa fa-edit"></i></div>
  <div class="controls">
    <div class="selectall-btn hidden">
      <input type="checkbox" id="selectall" class="select-all" name="select-check" />
      <label class="selectall-label" for="selectall"><span></span>Select All
</label>
    </div>
    <div class="deleteSelected disabledbutton"><i class="fa fa-trash"></i>
    </div>
  </div>
</div>
<div class="post-list" id="list">
  <div class="new-li">
    <div class="post-item" id="item0">
      <div class="selectall-btn w-embed hidden">
        <label class="selectall-label" for="post-select"><span></span>
</label>
      </div>
      <div class="shrink">
        <div class="select-block">
          <label class="pick-select hidden">
<input id="post-select" type="checkbox" class="select-input" name="select-check">
</label> new
        </div>
      </div>
    </div>
  </div>
  <div class="post-item" id="item1">
    <div class="selectall-btn w-embed hidden">
      <label class="selectall-label" for="post-select1"><span></span>
</label>
    </div>
    <div class="shrink">
      <div class="select-block">
        <label for="post-select1" class="pick-select hidden">
<input id="post-select1" type="checkbox" class="select-input" name="select-check">
</label> 1
      </div>
    </div>
  </div>
  <div class="post-item" id="item2">
    <div class="selectall-btn w-embed hidden">
      <label class="selectall-label" for="post-select2"><span></span>
</label>
    </div>
    <div class="shrink">
      <div class="select-block">
        <label for="post-select2" class="pick-select hidden">
<input id="post-select2" type="checkbox" class="select-input" name="select-check">
</label> 2
      </div>
    </div>
  </div>
</div>