如何使用复选框过滤内容？ - jQuery

Question

我想弄清楚如何使用jquery过滤输入/输出内容与复选框。对于jquery来说，我很新，我不知道如何以正确的方式来处理这个问题。

我想三个复选框是这样的：

<div class="check_filter"> 
    <div id="filter"> 
     <input type="checkbox" id="apple" /><label for="apple">Apple</label> 
     <input type="checkbox" id="pear" /><label for="pear">Pear</label> 
     <input type="checkbox" id="peach" /><label for="peach">Peach</label> 
    </div> 
</div> 

然后，我将有可能被过滤的内容：

<div id="content" > 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</p> 
    <p>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</p> 
    <p>Pellentesque ac sem ac sem tincidunt euismod.</p> 
    <p>Duis hendrerit purus vitae nibh tincidunt bibendum.</p> 
    <p>Nullam in nisi sit amet velit placerat laoreet.</p> 
    <p>Vestibulum posuere ligula non dolor semper vel facilisis orci ultrices.</p> 
</div> 

我想筛选出的数据的最佳方式时，该复选框被选中或未选中。

谢谢你对此的任何帮助。

Answer 1

$('#apple').change(function(){ 
    var checked = $(this).is(":checked"); 
    if(checked) 
    { 
     filterContentForApple(); 
    } 
}); 

，然后像...

function filterContentForApple() 
{ 
    $('#content p').each(function(){ 
     if($(this).is(":contains('apple')")//or some other condition 
     { 
     $(this).hide(); 
     } 
     else{ 
     $(this).show(); 
     } 
    }) 
} 

当然，你总是可以让一个过滤器（）函数，它的功能谓词作为参数，但是这应该给你的总体思路如何去做你所要求的。

Answer 2

你可以把课上要隐藏，然后使用toggle到show和hide他们<p> S：

HTML：

<div id="content" > 
    <p class="apple">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    <p>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</p> 
    <p class="pear">Curabitur a ipsum ut elit porttitor egestas non vitae libero.</p> 
    <p class="apple peach">Pellentesque ac sem ac sem tincidunt euismod.</p> 
    <p>Duis hendrerit purus vitae nibh tincidunt bibendum.</p> 
    <p>Nullam in nisi sit amet velit placerat laoreet.</p> 
    <p>Vestibulum posuere ligula non dolor semper vel facilisis orci ultrices.</p> 
</div> 

的jQuery：

$("#apple").toggle(
     function() { 
     $('.apple').hide(); 
     }, 
     function() { 
     $('.apple').show(); 
     } 
    );