He estado tratando de encontrar una respuesta, pero no me está dando ninguna respuesta y todo lo que encontré es para las casillas de verificación. Intenté esto pero .removeClass no funciona, además tengo que copiar y pegar cada cosa. Sé que hay una forma más compacta de cómo hacerlo, pero no sé cómo
$("#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> $("#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>