Javascript 在复选框状态下使div出现（或消失）

我有这个jQuery代码：

$(document).ready(function(){
    $('.checkdisplay').change(function(){
        if(this.checked)
            $('.todisplay').fadeIn('slow');
        else
            $('.todisplay').fadeOut('slow');

    });
});

只有选中.checkdisplay单选按钮，这项功能才非常有效：div出现，但如果取消选中.checkdisplay单选按钮，div.todisplay不会消失

我哪里错了

编辑：

演示：

问题是您的单选按钮，您应该使用如下复选框：

一旦选中了具有类checkdisplay的单选按钮，则将对其进行检查，以及如何对其进行检查

---

你需要测试所有的收音机，并且只在正确等级的收音机上显示

你也可以用身份证

请注意，我使用了.onclick，因为在某些浏览器中更改需要模糊

---

问题是，您不能取消选中单选按钮。

您可以在JSFIDLE中添加完整的代码吗？您是否包含了任何版本的jquery？很好用。你的HTML是什么？我不能使用复选框类型，我需要单选按钮。@MattiaDelFranco查看我的更新答案和工作演示我已经测试了你的实时演示：当我取消选中单选按钮时，div没有消失。它现在肯定会消失：@MattiaDelFranco取消选中时，该框会消失吗？这会将事件添加到页面上的所有输入字段中，不会测试实际选中的按钮，而是依赖于选中带有类的按钮的副作用。不太优雅。如果他更改了type=text并且选中了收音机，jQuery将尝试淡入again@mplungjan请看我的答案的更新，现在它检查了类型。现在您绑定到.radio类，没有任何理由检查类型。@mplungjan…好的，删除了，所以它基本上是我答案的第一个版本。。。我的第一个答案是我提供了错误的解释，有些解释可能会有所帮助！也不允许淡出

$('.checkdisplay').click(function() {
    if( $(this).is(':checked')) {
        $(".todisplay").fadeIn('slow');
    } else {
        $(".todisplay").fadeOut('slow');
    }
});

<input type='checkbox' class='checkdisplay' />
<div class='todisplay'>test</div>

$(document).ready(function(){
    $('.radio').change(function(){// add onchange on radio class
        // check the radio has checkdisplay class or not
        if($(this).hasClass('checkdisplay') && this.checked)
            $('.todisplay').fadeIn('slow');
        else
            $('.todisplay').fadeOut('slow');
    });
});

$(function(){
  $("input[name='roomdoor']").on("click",function(){
    if ($(this).hasClass("checkdisplay") && this.checked)
        $('.todisplay').fadeIn('slow');
    else
        $('.todisplay').fadeOut('slow');
  });
});

$(document).ready(function () {
    $('.radio').change(function () {
        if ($(this).hasClass('checkdisplay') && this.checked) $('.todisplay').fadeIn('slow');
        else $('.todisplay').fadeOut('slow');
    });
});