チェックボックスとJqueryの要素を非表示にする - jsfiddle例

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").on('click', function() { 
    var li_class = '.' + this.id;  
    $(li_class).toggle(); 
}); 

を目に住んで使用しないでください。必要ない場合は、showとhideの代わりにtoggleを使用して、書き込むコードを少なくする;）。

、代わりに

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

の使用：

this.id 

それは速くなります！

希望しました。

Answer 2

これを試してみてください：

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

Example fiddle

注：お使いのidのFireをチェックする水やその逆を示し理由です、ラベルの周りに間違った方法です。

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

target object that initiated the eventを取得するにはevent objectを使用してみてください。こうすることで、両方の項目をチェックしたときに両方の項目を返すチェックボックスを検索するのではなく、直接処理することができます。

$(".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を非表示にする必要があります（私は推測）

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> 

​