在复选框状态上显示（或消失）div

Question

我有这个jQuery代码：

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

    });
});

只有当我检查.checkdisplay单选按钮时才能正常工作：div出现，但之后，如果我取消选中.checkdisplay单选按钮，则div .todisplay不会消失。

我哪里错了？ ：（

编辑：

演示：http://jsfiddle.net/Mse2L/

Answer 1

您需要测试所有无线电并仅显示具有正确类别的无线电

您也可以使用ID

请注意，我使用.on("click"，因为在某些浏览器中更改需要模糊

Live Demo

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

Answer 2

问题是您的radio按钮，您应该使用checkbox之类的，

radio button课程checkdisplay为checked后，checked为unchecked，<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');
    });
});

Demo

已更新，尝试使用

{{1}}

Working demo

Answer 3

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

的 Demo

问题是，你不能取消选中一个无线电按钮。

Answer 4

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