使 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

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

Demo

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

Answer 3

问题是你的radio按钮，你应该使用checkboxlike，

一旦radio button 具有类checkdisplay 是checked 那么它将是checked，它怎么可能是unchecked

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

Demo

更新了，试试这个，

$(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');
    });
});

Working demo

Answer 4

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