Объединение значений из нескольких радиогрупп, чтобы показать div

Question

У меня три радиогруппы.Я хотел бы, чтобы пользователь выбирал из каждой группы, и в зависимости от того, какие выборы показывают определенный div.У меня проблемы с объединением значений с помощью оператора &&.Он будет работать так же, как и сейчас, но зависит только от последнего значения.Поэтому, если щелкнуть одну из кнопок-переключателей в последней группе, появится опция, которая явно не подходит.Я уверен, что есть гораздо лучший способ сделать это, но это то, что у меня есть.

Я использую jQuery 3+, но я открыт для всего, что проще.

$(document).ready(function () {

    // Hide the divs
    $(".w-ln-rn,.w-lsp-rsp,.b-ln-rn,.b-lsp-rsp,.message").hide();

    $('input[type="radio"]').change(function () {

        switch ($(this).val()) {

        case ( 'white' && 'ln' && 'rn' ):

            $(".w-ln-rn").show();
            break;

        case ( 'black' && 'lsp' && 'rsp' ):

            $(".b-lsp-rsp").show();
            break;

        case ('white' && 'lsp' && 'rsp'):

            $(".w-lsp-rsp").show();
            break;

        default:
         $(".w-ln-rn,.w-lsp-rsp,.b-ln-rn,.b-lsp-rsp,.message").hide();
    }

});

$('#reset').on('click', function() {
    $(".first,.second,.third,.message").hide();
    $('input[type=radio]').prop('checked', function () {
        return this.getAttribute('checked') == 'checked';

    });
 });
});

https://jsfiddle.net/lsvl_co/3p08r6b5/67/

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

Answer 1

Сначала я бы поместил все значения в массив.

var t = []
$('input[type="radio"]:checked').each(function() {
  t.push($(this).val())
});

, затем добавил t.join(' ') к вашему переключателю switch (t.join(' ')) {, и тогда ваш случай выглядел бы как case ('white ln rn'):

Рабочая демоверсия

$(document).ready(function() {

  $(".w-ln-rn,.w-lsp-rsp,.b-ln-rn,.b-lsp-rsp,.message").hide();

  /* $('input[type="radio"]').prop('checked', false); */

  $('input[type="radio"]').change(function() {
    var t = []
    $('input[type="radio"]:checked').each(function() {
      t.push($(this).val())
    });
    switch (t.join(' ')) {

      case ('white ln rn'):

        $(".w-ln-rn").show();
        break;

      case ('black lsp rsp'):

        $(".b-lsp-rsp").show();
        break;

      case ('white lsp rsp'):

        $(".w-lsp-rsp").show();
        break;

      default:
        $(".w-ln-rn,.w-lsp-rsp,.b-ln-rn,.b-lsp-rsp,.message").hide();
    }


    /* if ( $("input[value='white']").is(':checked') && $("input[value='rsp']").is(':checked') ) {
                $(".first").show();
             } elseif ($("input[value='black']").is(':checked') && $("input[value='rn']").is(':checked')); {
                 $(".second").show();
             } */



  });

  $('#reset').on('click', function() {
    $(".first,.second,.third,.message").hide();
    $('input[type=radio]').prop('checked', function() {
      return this.getAttribute('checked') == 'checked';

    });
  });
});

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

<input type="radio" value="white" name="unit" />White
<input type="radio" value="black" name="unit" />Black
<br/>

<h2> Left Handle </h2>
<input type="radio" value="ln" name="left" />Normal
<input type="radio" value="lsp" name="left" />Super Plush


<h2> Right Handle </h2>
<input type="radio" value="rn" name="right" />Normal
<input type="radio" value="rsp" name="right" />Super Plush


<div class="message">
  <h2>Please select an option!</h2>
</div>

<div class="w-ln-rn">White / Left Normal / Right Normal</div>
<div class="w-lsp-rsp">White / Left Super Plush / Right Super Plush</div>
<div class="b-ln-rn">Black / Left Normal / Right Normal</div>
<div class="b-lsp-rsp">Black / Left Super Plush / Right Super Plush</div>

<br><br>

<div id="reset-btn">
  <button id="reset">Reset</button>
</div>