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

Question

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

当在每个项目上选择其他单选按钮之一时，如何获得删除active的最后一个.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>