Показать и скрыть div на основе двух переключателей

Question

См. https://jsfiddle.net/JD26/9gcwf46z/2/

У меня есть две радиогруппы и четыре деления. В зависимости от того, какие переключатели выбраны, я всегда хочу показать только один div и скрыть остальные. Я пробовал разные вещи, но не могу заставить его работать.

HTML:

<div class="form-check">
   <input class="form-check-input" type="radio" name="color" id="blue" value="blue" checked>
   <label class="form-check-label" for="blue">blue</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="color" id="red" value="red">
   <label class="form-check-label" for="red">red</label>
</div>
<hr>
<div class="form-check">
   <input class="form-check-input" type="radio" name="animal" id="fox" value="fox" checked>
   <label class="form-check-label" for="fox">fox</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="animal" id="bear" value="bear">
   <label class="form-check-label" for="bear">bear</label>
</div>

<br><br>

<div class="blue fox">blue fox</div>

<div class="blue bear">blue bear</div>

<div class="red fox">red fox</div>

<div class="red bear">red bear</div>

jQuery:

$(".red").hide();
$(".bear").hide();

$("input[name='color']").on("change", function() {
        if ($("#blue").is(':checked')) {
            $(".blue").show();
            $(".red").hide();
        }

        else if ($("#red").is(':checked')) {
            $(".red").show();
            $(".blue").hide();
        }
    });


    $("input[name='animal']").on("change", function() {
        if ($("#fox").is(':checked')) {
            $(".fox").show();
            $(".bear").hide();
        }

        else if ($("#bear").is(':checked')) {
            $(".bear").show();
            $(".fox").hide();
        }
    });

Это не сработало, и этоне так:

  $('input').change(function() {
    if ($('input[value="blue"]').is(':checked') && $('input[value="fox"]').is(':checked')) {
      $('.blue').show();
      $('.fox').show();
      $('.red').hide();
      $('.bear').hide();
    }
    else if ($('input[value="blue"]').is(':checked') && $('input[value="bear"]').is(':checked')) {
      $('.blue').show();
      $('.fox').hide();
      $('.red').hide();
      $('.bear').show();
    }
    else if ($('input[value="red"]').is(':checked') && $('input[value="fox"]').is(':checked')) {
      $('.blue').hide();
      $('.fox').show();
      $('.red').show();
      $('.bear').hide();
    }
    else if ($('input[value="red"]').is(':checked') && $('input[value="bear"]').is(':checked')) {
      $('.blue').hide();
      $('.fox').hide();
      $('.red').show();
      $('.bear').show();
    }

  });

Помощь будет очень признателен!

Answer 1

Эти операторы if вам не нужны, вы можете использовать значения и показывать, скрывать в зависимости от значения.

$(document).ready(function () {
$(".fox").hide();
$(".bear").hide();
$("." + $("input[name='color']:checked").val() + "." + $("input[name='animal']:checked").val()).show();
});


$("input[type='radio']").on("change", function() {   
    $(".bear").hide();
    $(".fox").hide();
    $("." + $("input[name='color']:checked").val() + "." + $("input[name='animal']:checked").val()).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
   <input class="form-check-input" type="radio" name="color" id="blue" value="blue" checked>
   <label class="form-check-label" for="blue">blue</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="color" id="red" value="red">
   <label class="form-check-label" for="red">red</label>
</div>
<hr>
<div class="form-check">
   <input class="form-check-input" type="radio" name="animal" id="fox" value="fox" checked>
   <label class="form-check-label" for="fox">fox</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="animal" id="bear" value="bear">
   <label class="form-check-label" for="bear">bear</label>
</div>

<br><br>

<div class="blue fox">blue fox</div>

<div class="blue bear">blue bear</div>

<div class="red fox">red fox</div>

<div class="red bear">red bear</div>

Answer 2

Мы слишком много думаем и усложняемся. Все, что вам нужно, это то, что проверено, и используйте его, чтобы решить, какой div показать. Вот как выглядит код:

function doMagic() {
  var color = $('input[name="color"]:checked').val();
  var animal = $('input[name="animal"]:checked').val();

  $(".red").hide();
  $(".blue").hide();

  $("." + color + "." + animal).show();
}

doMagic();
$('input').change(function() {
  doMagic();
});

А вот и рабочая скрипка

Answer 3

$(".red").hide();
$(".bear").hide();
 
$('input').change(function(elem) { 
  let animalClass = "."+$("input[name='animal']:checked").val();
  let colorClass = "."+$("input[name='color']:checked").val();
  $(".blue, .red, .fox, .bear").hide();
  $(colorClass+animalClass).show();
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>

<div class="form-check">
   <input class="form-check-input" type="radio" name="color" id="blue" value="blue" checked>
   <label class="form-check-label" for="blue">blue</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="color" id="red" value="red">
   <label class="form-check-label" for="red">red</label>
</div>
<hr>
<div class="form-check">
   <input class="form-check-input" type="radio" name="animal" id="fox" value="fox" checked>
   <label class="form-check-label" for="fox">fox</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="animal" id="bear" value="bear">
   <label class="form-check-label" for="bear">bear</label>
</div>

<br><br>

<div class="blue fox">blue fox</div>

<div class="blue bear">blue bear</div>

<div class="red fox">red fox</div>

<div class="red bear">red bear</div>