组合来自多个无线电组的值以显示 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>