时间戳

首页 > 解决方案 > jQuery - 如果选中复选框（多个条件），则删除活动类

jquery - jQuery - 如果选中复选框（多个条件），则删除活动类

问题描述

我想保持一次只有一个.menu active，所以我设置了代码来删除最后.menu一个接收类的活动active类。我不能使用id，因为我有多个项目，每个项目都有自己的唯一 ID，所以我尝试使用data-type&data-id来调用每组唯一的按钮和菜单。

当在每个项目上选择其他单选按钮之一时，如何获取代码以删除最后一active类 a ？.menu换句话说，将active类赋予.menu它的相应按钮，但如果选中另一个收音机或再次选中它（删除所有active菜单），则将其删除。

$('input[name="studio"]').change(function() {
  var t = $(this).closest(".item");
  var id = $(this).data("type");
  $(".menu[data-id=" + id + "]").toggleClass("active", this.checked);
  var menuCat = t.find(".menu--categories");
  var menuLoc = t.find(".menu--locations");
  var menuProj = t.find(".menu--projects");
  var btnCat = $(this).closest(".cat_label").find("input[id=" + id + "]");
  var btnLoc = $(this).closest(".loc_label").find("input[id=" + id + "]");
  var btnProj = $(this).closest(".proj_label").find("input[id=" + id + "]");

  if (btnCat.is(":checked") && $(this).attr("id") === btnLoc) {
    btnLoc.prop("checked", true);
    btnCat.prop("checked", false);
    btnProj.prop("checked", false);
    menuCat.removeClass("active");
  }
  if (btnCat.is(":checked") && $(this).attr("id") === btnProj) {
    btnProj.prop("checked", true);
    btnLoc.prop("checked", false);
    btnCat.prop("checked", false);
    menuCat.removeClass("active");
  }
  if (btnLoc.is(":checked") && $(this).attr("id") === btnCat) {
    btnCat.prop("checked", true);
    btnProj.prop("checked", false);
    btnLoc.prop("checked", false);
    menuLoc.removeClass("active");
  }
  if (btnLoc.is(":checked") && $(this).attr("id") === btnProj) {
    btnProj.prop("checked", true);
    btnCat.prop("checked", false);
    btnLoc.prop("checked", false);
    menuLoc.removeClass("active");
  }
  if (btnProj.is(":checked") && $(this).attr("id") === btnCat) {
    btnCat.prop("checked", true);
    btnProj.prop("checked", false);
    btnLoc.prop("checked", false);
    menuProj.removeClass("active");
  }
  if (btnProj.is(":checked") && $(this).attr("id") === btnLoc) {
    btnLoc.prop("checked", true);
    btnProj.prop("checked", false);
    btnCat.prop("checked", false);
    menuProj.removeClass("active");
  }
});
.wrap {
  display: flex;
}

.item {
  border: 2px solid
}

.menu {
  height: 20px;
  width: 60px;
  border: 1px solid
}

.active {
  background: blue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="menu menu--categories" data-id="cat"></div>
  <label class="cat_label" for="cat" data-btn="categories">
    <input id="cat" data-type="cat" type="radio" name="studio" />
    Categories
  </label>
  <div class="menu menu--locations" data-id="loc"></div>
  <label class="loc_label" for="loc" data-btn="locations">
    <input id="loc" data-type="loc" type="radio" name="studio" />
    Locations
  </label>
  <div class="menu menu--projects" data-id="proj"></div>
  <label class="proj_label" for="proj" data-btn="projects">
    <input id="proj" data-type="proj" type="radio" name="studio" />
    Projects
  </label>
</div>
<div class="item">
  <div class="menu menu--categories" data-id="cat_2"></div>
  <label class="cat_label" for="cat_2" data-btn="categories">
    <input id="cat_2" data-type="cat_2" type="radio" name="studio" />
    Categories
  </label>
  <div class="menu menu--locations" data-id="loc_2"></div>
  <label class="loc_label" for="loc_2" data-btn="locations">
    <input id="loc_2" data-type="loc_2" type="radio" name="studio" />
    Locations
  </label>
  <div class="menu menu--projects" data-id="proj_2"></div>
  <label class="proj_label" for="proj_2" data-btn="projects">
    <input id="proj_2" data-type="proj_2" type="radio" name="studio" />
    Projects
  </label>
</div>

标签： jquery

解决方案

正如 Henrique 上面提到的，删除所有具有“菜单”类的项目的类。

$('input[name="studio"]').change(function() {
        $('.menu').removeClass('active'); // add this line

推荐阅读