根据多个单选按钮切换 show/hide

Question

我正在努力在选择多个单选按钮时显示特定的 div。当我只有 1 个条件（无线电值等于 X）时，我可以让它工作，但我需要它来使“IF radio1 等于 X AND radio2 等于 A）

我尝试了多种方法，但这个似乎是最有潜力的一种，因为我不需要隐藏所有其他可能性，就像我尝试过的其他脚本一样。

<script type="javascript">
$(function() {

/* Code that works for 1 condition (show div named 1A with FirstSelector value is 1) */

    $('input[name=FirstSelector]').change(function() {
      $("div[name=1]").toggle(this.value === "1")
    }).filter(":checked").change()

    $('input[name=FirstSelector]').change(function() {
      $("div[name=2]").toggle(this.value === "2")
    }).filter(":checked").change()

/* Code for multiple IFs that is not working */

    $('input[name=FirstSelector]').change(function() {
      $("div[name=1A]").toggle(this.value === "1" && 'input[name=SecondSelector]'.value === "A" )
    }).filter(":checked").change()

})
</script>

<html>
<p>
First choice
</p>
<input type="radio" name="FirstSelector" value="1">Option 1
<input type="radio" name="FirstSelector" value="2">Option 2


<p>
Second choice
</p>
<input type="radio" name="SecondSelector" value="A">Option A
<input type="radio" name="SecondSelector" value="B">Option B

<div name="1" class="hide">
This is the result of just Option 1
</div>

<div name="2" class="hide">
This is the result of just Option 2
</div>

<div name="1A" class="hide">
This is the result of 1 and A
</div>

<div name="1B" class="hide">
This is the result of 1 and B
</div>

<div name="2A" class="hide">
This is the result of 2 and A
</div>

<div name="2B" class="hide">
This is the result of 2 and B
</div>
</html>

http://jsfiddle.net/antonio1475/df7ra8eu/

谢谢

Answer 1

您的代码有很多问题，但要解决 DIV 未显示的简单问题，请查看此问题，get value from radio group using jquery

这一行...

  $("div[name=1A]").toggle(this.value === "1" && $('input[name=SecondSelector]').val() === "A" )

您缺少 input[name=SecondSelector] 周围的 jQuery 选择器 $('')。此外，当您应该调用 val() 函数时，您试图获取 value，因为它是一个无线电组。

这是决赛

$('input[name=FirstSelector]').change(function() {
    console.log($('input[name=SecondSelector]').val());
    $("div[name=1A]").toggle(this.value === "1" && $('input[name=SecondSelector]').val() === "A" )
}).filter(":checked").change()

Answer 2

这是我对 java-脚本代码所做的更改。

$('input[name=FirstSelector]').change(function() {
    var radioValue = $("input[name='SecondSelector']:checked").val();
    $("div[name=1A]").toggle(this.value === "1" && radioValue && radioValue === "A" )
}).filter(":checked").change()

已更新 fiddle：http://jsfiddle.net/145tbqx0/

Answer 3

代码有几个问题。简化事情的第一步是对每个更改使用相同的逻辑：

$('input').change(() => {
  const first = $('input[name=FirstSelector]:checked').val();
  const second = $('input[name=SecondSelector]:checked').val();
  $("div[name=1]").toggle(first === "1");
  $("div[name=2]").toggle(first === "2");
  $("div[name=1A]").toggle(first === "1" && second === "A");
  $("div[name=1B]").toggle(first === "1" && second === "B");
  $("div[name=2A]").toggle(first === "2" && second === "A");
  $("div[name=2B]").toggle(first === "2" && second === "B");
});

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
First choice
</p>
<input type="radio" name="FirstSelector" value="1">Option 1
<input type="radio" name="FirstSelector" value="2">Option 2


<p>
Second choice
</p>
<input type="radio" name="SecondSelector" value="A">Option A
<input type="radio" name="SecondSelector" value="B">Option B

<div name="1" class="hide">
This is the result of just Option 1
</div>

<div name="2" class="hide">
This is the result of just Option 2
</div>

<div name="1A" class="hide">
This is the result of 1 and A
</div>

<div name="1B" class="hide">
This is the result of 1 and B
</div>

<div name="2A" class="hide">
This is the result of 2 and A
</div>

<div name="2B" class="hide">
This is the result of 2 and B
</div>

Answer 4

谦虚地说，这是最简单的解决方案：

$(function() {

  var Msg = {};

  Msg['1-'] = 'This is the result of just Option 1'
  Msg['2-'] = 'This is the result of just Option 2'
  Msg['-A'] = 'This is the result of just Option A'
  Msg['-B'] = 'This is the result of just Option B'
  Msg['1A'] = 'This is the result of Options 1 and A'
  Msg['1B'] = 'This is the result of Options 1 and B'
  Msg['2A'] = 'This is the result of Options 2 and A'
  Msg['2B'] = 'This is the result of Options 2 and B'
  
  $('input[name=FirstSelector]').change( CalcMsg );
  $('input[name=SecondSelector]').change( CalcMsg );

  function CalcMsg() {
    var Ref = $('input[name=FirstSelector]:checked').val() || '-';
      Ref += $('input[name=SecondSelector]:checked').val()  || '-';

    $('#Msg').text( Msg[Ref] ).removeClass( "hide" );
  }
})

.hide {display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>  First choice </p>
<label><input type="radio" name="FirstSelector" value="1">Option 1</label>
<label><input type="radio" name="FirstSelector" value="2">Option 2</label>

<p> Second choice </p>
<label><input type="radio" name="SecondSelector" value="A">Option A</label>
<label><input type="radio" name="SecondSelector" value="B">Option B</label>

<div id="Msg" class="hide">
  This is the result of ...
</div>

根据多个单选按钮切换 show/hide

Toggle show/hide based on multiple radio buttons

javascript

conditional

toggle

radio-button