-1

如果我不选中这两个框，这很好。不知道如何修复它。

$(".home-check").live('click', function() {
if ($(".home-check").is(':checked')) {
    var ident = $(this).attr('id');
    $('.' + ident).hide();

} else {
    var identt = $(this).attr('id');
    $('.' + identt).show();
}
});​
<p><input class="home-check" id="water" type="checkbox" name="gethired" />Fire - Only Show Fire</p>
<p><input class="home-check" id="fire" type="checkbox" name="hire" />Water - Only Show Water</p>

<li class="fire">Fire</li>
<li class="water">Water</li>
<li class="fire">Fire</li>
<li class="water">Water</li>
<li class="fire">Fire</li>
<li class="water">Water</li>

http://jsfiddle.net/cip691/AeyAL/2/

4

6 回答 6

3

试试这个：

$(".home-check").live('click', function() {
    $("li").hide();
    $(".home-check:checked").each(function() {
        $("." + this.id).show();
    });
});

示例小提琴

注意：你的身份证是错误的标签，这就是为什么检查Fire显示水，反之亦然。

于 2012-04-17T19:25:45.907 回答
1

试试这个： 

$(".home-check").on('click', function() {
    var li_class = '.' +  this.id;    
    $(li_class).toggle();
});

​ 不要使用 live 在这种情况下没有必要，使用切换而不是显示和隐藏 = 更少的代码编写;）。

而不是

$(this).attr('id');

采用：

this.id

它会更快！

希望它有用！

于 2012-04-17T19:32:21.297 回答
0 
if ($(".home-check").is(':checked')) {
    var ident = $(this).attr('id');
    $('.' + ident).hide();

} else {
    var identt = $(this).attr('id');
    $('.' + identt).show();
}

你不认为你正在使用 TAG 的 ID 吗？所以改变“。” 对于“#”，然后尝试一下

if ($(".home-check").is(':checked')) {
    var ident = $(this).attr('id');
    $('#' + ident).hide();

} else {
    var identt = $(this).attr('id');
    $('#' + identt).show();
}
于 2012-04-17T19:26:05.720 回答
0

使用事件对象获取发起事件的目标对象。这样，您可以直接对其进行操作，而不是搜索一个复选框，当您同时选中它们时，它会返回这两个项目。

$(".home-check").live('click', function (event) {
    var checkbox = event.target;
    var ident = $(checkbox).attr('id');

    if ($(checkbox).is(':checked')) {
        $('.' + ident).hide();

    } else {
        $('.' + ident).show();
    }
});​
于 2012-04-17T19:28:07.420 回答
0

试试这个：

$(".home-check").live('click', function() {
    if ($(this).is(':checked')) {
        var ident = $(this).attr('id');
        $('.' + ident).hide();

   } else {
       var identt = $(this).attr('id');
       $('.' + identt).show();
   }

});​</p>

示例小提琴

于 2012-04-17T19:29:48.807 回答
0

http://jsfiddle.net/HKQxH/

这将显示和隐藏带有复选框的 li 元素。

li 必须隐藏（我猜）

li{display:none;}​

js

$(".home-check").live('click', function() {         
        if ( $(this).is(':checked') ){
        $('li.' + $(this).attr('id')).show();
        }
                      else{
                      $('li.' + $(this).attr('id')).hide();
                      }
});​

和html（“火”和“水”不在“顺序”中）

    <p><input class="home-check" id="water" type="checkbox" name="gethired" />Water</p>
<p><input class="home-check" id="fire" type="checkbox" name="hire" />Fire</p>

<li class="fire">Fire</li>
<li class="water">Water</li>
<li class="fire">Fire</li>
<li class="water">Water</li>
<li class="fire">Fire</li>
<li class="water">Water</li>

​
于 2012-04-17T20:19:05.377 回答