如果未选中，则删除具有匹配 id 的单选按钮的元素类答案

【问题标题】：Remove element class with a matching id of radio button if unchecked如果未选中，则删除具有匹配 id 的单选按钮的元素类
【发布时间】：2022-02-13 01:11:35
【问题描述】：

我一直在尝试寻找答案，但它没有给我任何答案，我发现的只是我尝试过的复选框，但 .removeClass 不起作用，而且我必须复制和粘贴每一件事。我知道有一种更紧凑的方法，但我不知道如何

$("#group1").change(function() {
  if ($(this).is(":checked")) {
    $(".group1").addClass("red");
  } else {
    $(".group2").removeClass("orange");
  }
});

$("#group2").change(function() {
  if ($(this).is(":checked")) {
    $(".group2").addClass("orange");
  } else {
    $(".group2").removeClass("orange");
  }
});

div {
  width: 100px;
  height: 100px;
  border: 1px solid
}

.red {
  background-color: red
}

.orange {
  background-color: orange
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" name="numbers" value="first" id="group1" />
<label for="id1">1</label>

<input type="radio" name="numbers" value="second" id="group2" />
<label for="id2">2</label>

<div class="group1"></div>
<div class="group2"></div>

【问题讨论】：

请准确描述您想要做什么。添加/删除的两个类在两个事件处理程序之间不一致。
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript jquery css

【解决方案1】：

$("#group1").change(function() {
  if ($(this).is(":checked")) {
    $(".group1").addClass("red");
    $(".group2").removeClass("orange");
  }
});

$("#group2").change(function() {
  if ($(this).is(":checked")) {
    $(".group2").addClass("orange");
    $(".group1").removeClass("red");
  }
});

div {
  width: 100px;
  height: 100px;
  border: 1px solid
}

.red {
  background-color: red
}

.orange {
  background-color: orange
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" name="numbers" value="first" id="group1" />
<label for="id1">1</label>

<input type="radio" name="numbers" value="second" id="group2" />
<label for="id2">2</label>

<div class="group1"></div>
<div class="group2"></div>

【讨论】：

这是你想要达到的目标吗...