0

我有 4 个块,每当我按下其中一个块时,其中就会出现一个复选框。如果我单击另一个块,当前复选框将消失,另一个复选框将出现,这很好。问题是,如果我单击一个块并出现复选框,当我按下该复选框时,该块将消失,它不应该。

我有以下html代码:

<div class="item">1 <input class="hidden" type="checkbox"></div>
<div class="item">2 <input class="hidden" type="checkbox"></div>
<div class="item">3 <input class="hidden" type="checkbox"></div>
<div class="item">4 <input class="hidden" type="checkbox"></div>

以下CSS代码:

.hidden {
    display: none;
}

和javascript代码:

$(".item").click(function(){     
    $(".item").find('input').hide();                    
    $(this).find('input').show('fast');
});

我该怎么做才能隐藏除当前复选框(我单击的块)之外的所有可见复选框?

4

2 回答 2

5

像这样使用.not()过滤器

$(".item").click(function(){     
    $(".item").not(this).find('input').hide();                    
});

编辑:

您可能需要考虑用户是否想改变主意,并重新启用所有选项。你可以这样做:

$(".item").click(function(){     
    var items = $(".item").not(this).find('input');
    if($('input',this).is(':checked')) items.hide();
    else items.show();                
});

http://jsfiddle.net/r8yBd/

于 2013-11-12T15:01:44.050 回答
1

尝试

$(".item").click(function(){     
    $(".item").find('input').addClass('hidden');                    
    $(this).find('input').removeClass('hidden');
});
于 2013-11-12T15:01:05.950 回答