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

フィドルの例

注：あなたのIDはラベルに対して間違った方法です。そのため、チェックするFireと水が表示され、その逆も同様です。

于 2012-04-17T19:25:45.907 に答える
1

代わりにこれを試してください： 

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

この場合は live を使用しないでください。必要がないため、show と hide の代わりに toggle を使用してください = 書くコードが少なくて済みます ;)。

そして代わりに

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

使用する：

this.id

それは速くなります！

お役に立てば幸いです！

于 2012-04-17T19:32:21.297 に答える
0

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>

​
于 2012-04-17T20:19:05.377 に答える
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 に答える