Question

当选择多个单选按钮时，我正在努力显示特定的div。当我只有1个条件（无线电值等于X）时，我可以使其工作，但是我需要它使“如果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

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

$('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 2

坦率地说，这是最简单的解决方案：

$(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>

Answer 3

您的代码有很多问题，但是要解决DIV的简单问题，即不显示问题，get value from radio group using jquery

此行...

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

您在$('')周围缺少jQuery选择器input[name=SecondSelector]。另外，由于它是一个广播组，因此您应该在应该调用value函数的时候尝试获取val()。

这是决赛

$('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 4

这是我对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()

更新的小提琴：http://jsfiddle.net/145tbqx0/

基于多个单选按钮切换显示/隐藏

4 个答案: