Question

如果我不选中这两个框，这样可以正常工作。不知道如何解决它。

$(".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/

Answer 1

试试这个：

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

Example fiddle

注意：您的ID是错误的标签方式，这就是检查Fire显示水的原因，反之亦然。

Answer 2

请改为尝试：

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

在这种情况下不要使用live这是没有必要的，使用toggle而不是show和hide =更少的代码来写;）。

而不是

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

使用：

this.id

会更快！

希望它有用！

Answer 3

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

Answer 4

使用event object获取target object that initiated the event。通过这种方式，您可以直接对其进行操作，而不是执行搜索复选框，当您同时选中这两个项时，该复选框将返回这两个项目。

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

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

    } else {
        $('.' + ident).show();
    }
});

Answer 5

试试这个：

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

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

}）;

Example fiddle

Answer 6

http://jsfiddle.net/HKQxH/

这将使用复选框显示和隐藏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>

显示带有复选框的隐藏元素和Jquery - jsfiddle示例

6 个答案: