从多个无线电组组合值显示一个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/

理想情况下，我想简单地显示，适用于从无线电集团选择的各种选项的股利。

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>