用複選框和jquery顯示隱藏元素 - jsfiddle示例

-1

如果我不勾選這兩個框，此工作正常。不知道如何解決它。用複選框和jquery顯示隱藏元素 - jsfiddle示例

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

來源

2012-04-17 Ciprian

目前尚不清楚您期望的行爲... – 2012-04-17 19:30:29

試試這個：

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

不要在次使用活如果沒有必要，請使用toggle而不是show和hide =編寫更少的代碼;）。和

代替

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

使用：

this.id

它會更快！

希望它有用！

來源

2012-04-17 19:32:21 macpie

非常好。切換工作很好。謝謝！ – Ciprian 2012-04-17 19:38:52

試試這個：

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

Example fiddle

注意：你的ID是圍繞着錯誤的方式爲標籤，這就是爲什麼檢查Fire顯示水，反之亦然。

來源

2012-04-17 19:25:45

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-17 19:26:05 jcho360

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

來源

2012-04-17 19:28:07

試試這個：

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

來源

2012-04-17 19:29:48 user1339587

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-17 20:19:05 chepe263

用複選框和jquery顯示隱藏元素 - jsfiddle示例

回答

相關問題