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

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

javascript

Javascript 基于多个单选按钮切换显示/隐藏,javascript,radio-button,conditional,toggle,Javascript,Radio Button,Conditional,Toggle,我正在努力在选择多个单选按钮时显示一个特定的div。当我只有1个条件时（无线电值等于X），我可以使它工作，但我需要它使“如果无线电1等于X，无线电2等于A）我尝试了多种方法，但这一种似乎是最有潜力的，因为我不需要像我尝试过的其他脚本那样隐藏所有其他可能性 <script type="javascript"> $(function() { /* Code that works for 1 condition (show div named 1A with FirstSelector

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


$（函数（）{
/*适用于1条件的代码（显示名为1A的div，FirstSelector值为1）*/
$（'input[name=FirstSelector]'）。更改（函数（）{
$（“div[name=1]”。切换（this.value==“1”）
}).filter（“：选中”）.change（）
$（'input[name=FirstSelector]'）。更改（函数（）{
$（“div[name=2]”。切换（this.value==“2”）
}).filter（“：选中”）.change（）
/*不工作的多个IFs的代码*/
$（'input[name=FirstSelector]'）。更改（函数（）{
$（“div[name=1A]”。切换（this.value==“1”&&“input[name=SecondSelector]”。value==“A”）
}).filter（“：选中”）.change（）
})

首选

选择1
选择2

第二选择

方案A
方案B
这是选项1的结果
这是选项2的结果
这是1和A的结果
这是1和B的结果
这是2和A的结果
这是2和B的结果

谢谢

您的代码有很多问题，但是为了解决DIV没有显示此问题的简单问题

这条线

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

您在

输入[name=SecondSelector]

周围缺少jQuery选择器

$（“”）

。此外，您还试图获取

值，因为它是一个无线组，您本应调用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()

你的代码有很多问题，但是为了解决DIV没有显示这个问题的简单问题
这条线
  $("div[name=1A]").toggle(this.value === "1" && $('input[name=SecondSelector]').val() === "A" )

您在输入[name=SecondSelector]
周围缺少jQuery选择器$（“”）
。此外，您还试图获取值，因为它是一个无线组，您本应调用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()

下面是我对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:
这里是我对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:
代码有几个问题。简化的第一步是对每个更改使用相同的逻辑：

$（'input'）。更改（（）=>{
const first=$（'input[name=FirstSelector]：checked'）.val（）；
const second=$（'input[name=SecondSelector]：checked'）.val（）；
$（“div[name=1]”。切换（first==“1”）；
$（“div[name=2]”。切换（first==“2”）；
$（“div[name=1A]”。切换（第一个==“1”和第二个==“A”）；
$（“div[name=1B]”。切换（第一个==“1”和第二个==“B”）；
$（“div[name=2A]”。切换（第一个==“2”和第二个==“A”）；
$（“div[name=2B]”。切换（第一个==“2”和第二个==“B”）；
})；
.hide{
显示：无；
}


首选

选择1
选择2

第二选择

方案A
方案B
这是选项1的结果
这是选项2的结果
这是1和A的结果
这是1和B的结果
这是2和A的结果
这是2和B的结果
代码中有几个问题。简化事情的第一步是对每次更改使用相同的逻辑：

$（'input'）。更改（（）=>{
const first=$（'input[name=FirstSelector]：checked'）.val（）；
const second=$（'input[name=SecondSelector]：checked'）.val（）；
$（“div[name=1]”。切换（first==“1”）；
$（“div[name=2]”。切换（first==“2”）；
$（“div[name=1A]”。切换（第一个==“1”和第二个==“A”）；
$（“div[name=1B]”。切换（第一个==“1”和第二个==“B”）；
$（“div[name=2A]”。切换（第一个==“2”和第二个==“A”）；
$（“div[name=2B]”。切换（第一个==“2”和第二个==“B”）；
})；
.hide{
显示：无；
}


首选

选择1
选择2

第二选择

方案A
方案B
这是选项1的结果
这是选项2的结果
这是1和A的结果
这是1和B的结果
这是2和A的结果
这是2和B的结果
恕我直言，以下是最简单的解决方案：

$（函数（）{
var Msg={}；
Msg['1-']='这只是选项1的结果'
Msg['2-']='这只是选项2的结果'
Msg['-A']='这是选项A的结果'
Msg['-B']='这只是选项B的结果'
Msg['1A']='这是选项1和A的结果'
Msg['1B']='这是选项1和B的结果'
Msg['2A']='这是选项2和A的结果'
Msg['2B']='这是选项2和B的结果'
$（'input[name=FirstSelector]'）。更改（CalcMsg）；
$（'input[name=SecondSelector]'）。更改（CalcMsg）；
函数CalcMsg（）{
var Ref=$（'input[name=FirstSelector]：checked'）.val（）；
Ref+=$（'input[name=SecondSelector]：选中'）.val（）| |'-'；
$（'#Msg'）.text（Msg[Ref]）.removeClass（“隐藏”）；
}
})
.hide{display:none；}

首选
选择1
选择2
第二选择
方案A
方案B
这是……的结果。。。
恕我直言，以下是最简单的解决方案：

$（函数（）{
var Msg={}；
Msg['1-']='这只是选项1的结果'
Msg['2-']='这只是选项2的结果'
Msg['-A']='这是选项A的结果'
Msg['-B']='这只是选项B的结果'
Msg['1A']='这是选项1和A的结果'
Msg['1B']='这是选项1和B的结果'
Msg['2A']='这是选项2和A的结果'
Msg['2B']='这是选项2和B的结果'
$（'input[name=FirstSelector]'）。更改（CalcMsg）；
$（'input[name=SecondSelector]'）。更改（CalcMsg）；
函数CalcMsg（）{
var Ref=$（'input[name=Fir