Javascript 使用复选框显示和隐藏Div

我的要求是，如果我选择单因素，我只能选择一种类型的身份验证模式。如果选择任何一种身份验证模式，则会显示相应的div，在多个因素中，我可以选择两种身份验证模式，但如果选择两种身份验证模式，则只显示第一个选中的div get，但不显示第二个选中的div get。选择2个选项时如何显示两个div

我试过这个：

    if ($('#chkOTP').is(':checked')) {
        $('#OTPMain').show();
    } else if ($('#chkVoicePrint').is(':checked')) {
        $('#VoicePrintEmailCampMain').show();
    } else if ($('#chkPersonInfo').is(':checked')) {
        $('#RandomAuthMain').show();
    } else if ($('#chkPastHis').is(':checked')) {
        $('#PastHistoryMain').show();
    } else if ($('#chkSQ').is(':checked')) {
        $('#SqQuestionMain').show();
    }

---

提前谢谢。

用这个。。如果只执行一条语句，则使用else，因此应选中每个复选框的If

    if ($('#chkOTP').is(':checked')) {
        $('#OTPMain').show();
    } 
    if ($('#chkVoicePrint').is(':checked')) {
        $('#VoicePrintEmailCampMain').show();
    } 
    if ($('#chkPersonInfo').is(':checked')) {
        $('#RandomAuthMain').show();
    } 
    if ($('#chkPastHis').is(':checked')) {
        $('#PastHistoryMain').show();
    } 
    if ($('#chkSQ').is(':checked')) {
        $('#SqQuestionMain').show();
    }

---

用这个。。如果只执行一条语句，则使用else，因此应选中每个复选框的If

    if ($('#chkOTP').is(':checked')) {
        $('#OTPMain').show();
    } 
    if ($('#chkVoicePrint').is(':checked')) {
        $('#VoicePrintEmailCampMain').show();
    } 
    if ($('#chkPersonInfo').is(':checked')) {
        $('#RandomAuthMain').show();
    } 
    if ($('#chkPastHis').is(':checked')) {
        $('#PastHistoryMain').show();
    } 
    if ($('#chkSQ').is(':checked')) {
        $('#SqQuestionMain').show();
    }

---

使用一点预先考虑可以为您节省大量代码。在div上放置一个与复选框值匹配的类，您只需在jQuery中单击一下即可，如下所示：

<input type="checkbox" name="vehicle" value="first">First<br />
<input type="checkbox" name="vehicle" value="second">Second<br />
<input type="checkbox" name="vehicle" value="third">Third<br />
<input type="checkbox" name="vehicle" value="fourth">Fourth<br />
<div class="first">First</div>
<div class="second">second</div>
<div class="third">third</div>
<div class="fourth">fourth</div>



$('input:checkbox').on('click',function(){
    if($(this).is(':checked'))
    {
        $('.'+$(this).val()).show();
    } else {
        $('.'+$(this).val()).hide();
    }

});

首先

第二个

第三个

第四

弗斯特
第二
第三
第四
$（'input:checkbox'）。在（'click'，function（）上{
如果（$（this）.is（':checked'））
{
$（'.+$（this.val（））.show（）；
}否则{
$（'.+$（this.val（））.hide（）；
}
});

---

演示：

使用一点预先考虑可以为您节省大量代码。在div上放置一个与复选框值匹配的类，您只需在jQuery中单击一下即可，如下所示：

<input type="checkbox" name="vehicle" value="first">First<br />
<input type="checkbox" name="vehicle" value="second">Second<br />
<input type="checkbox" name="vehicle" value="third">Third<br />
<input type="checkbox" name="vehicle" value="fourth">Fourth<br />
<div class="first">First</div>
<div class="second">second</div>
<div class="third">third</div>
<div class="fourth">fourth</div>



$('input:checkbox').on('click',function(){
    if($(this).is(':checked'))
    {
        $('.'+$(this).val()).show();
    } else {
        $('.'+$(this).val()).hide();
    }

});

首先

第二个

第三个

第四

弗斯特
第二
第三
第四
$（'input:checkbox'）。在（'click'，function（）上{
如果（$（this）.is（':checked'））
{
$（'.+$（this.val（））.show（）；
}否则{
$（'.+$（this.val（））.hide（）；
}
});

---

---

演示：

发布您的代码。。。不是你想要的描述我们不是来做你的工作的。我们可以帮助您，但是我们需要看看您到目前为止有什么（请发布一些代码）。if（$（'chkOTP'）.is（'checked'））{$（'OTPMain'）.show（）}else if（$（'chkVoicePrint'）.is（'checked'））{$（'voiceprintmailcampmain'）.show（）}else if（$（'chkPersonInfo'）。is（'checked'））$（'voiceprintmain show（））els（'else if（$（'chkpastis'）.is（'：checked'）{$（'PastHistoryMain'）.show（）；}else if（$（'chkSQ'）.is（'：checked'））{$（'SqQuestionMain'）.show（）}请发布代码。请..在JSFIDLE上发布代码…发布代码。。。不是你想要的描述我们不是来做你的工作的。我们可以帮助您，但是我们需要看看您到目前为止有什么（请发布一些代码）。if（$（'chkOTP'）.is（'checked'））{$（'OTPMain'）.show（）}else if（$（'chkVoicePrint'）.is（'checked'））{$（'voiceprintmailcampmain'）.show（）}else if（$（'chkPersonInfo'）。is（'checked'））$（'voiceprintmain show（））els（'else if（$（'.'chkpastis'）.is（':checked'）{$（'.'PastHistoryMain'）.show（）；}else if（$（'.'chkSQ'）.is（':checked'））{$（'.'SqQuestionMain'）.show（）}请发布您的代码。请..将您的代码发布到JSFIDLE上…@Vignesh'+$（this.val（）；/）如果使用class first>

.first

@Vignesh'.+$（this.val（）；/）单击div，则会出现这种情况如果用class first>>

单击div，就会出现这种情况。首先

感谢您的建议，我尝试过，但问题是如果我取消选中多因素中的一个复选框并将下拉列表更改为单因素，问题是显示了两个div。您在哪里添加了此代码。。？？我想他说的是，如果一个值发生了变化，你的代码就无法隐藏div。如果他一次添加div，它应该被隐藏。。我不知道他在哪里使用了这个代码，那么我该如何帮助他呢？我尝试了上面的代码，效果很好。谢谢你的解决方案。谢谢你的建议，我试过了，但问题是如果我取消选中多因素中的一个复选框，并将下拉列表更改为单因素，问题是显示了两个div。您在哪里添加了此代码。。？？我想他说的是，如果一个值发生了变化，你的代码就无法隐藏div。如果他一次添加div，它应该被隐藏。。我不知道他在哪里使用了这个代码，那么我该如何帮助他呢？我尝试了上面的代码，效果很好，谢谢你的解决方案。