php javascript過濾內容

Question

我需要一個針對我的網站的內容過濾系統。通過檢查和取消選中複選框，相應的元素應該顯示或隱藏。上述

<form> 
    <p><input type="checkbox" checked="checked"><label>Plants</label></p> 
    <p><input type="checkbox" checked="checked"><label>Animals</label></p> 
    <p><input type="checkbox" checked="checked"><label>Humans</label></p> 
</form> 

的複選框應觸發下面與根據類的div的可見性，通過改變display:block;到display:none;

<div class="Plants" style="display:block"> 
    <p>Grass</p> 
<div> 
<div class="Humans" style="display:block"> 
    <p>John</p> 
<div> 
<div class="Plants" style="display:block"> 
    <p>Flower</p> 
<div> 
<div class="Animals" style="display:block"> 
    <p>Lion</p> 
<div> 

例如： 通過uchecking的植物複選框，與草和的div花應該隱藏起來。

什麼是最優雅的方式來完成在PHP或JavaScript？

Answer 1

根據你的HTML結構，你可以使用：

• change事件
• :checkbox選擇
• toggle（布爾）
• next

正如評論報道：

在您的PHP文件中，您必須包含jQuery庫。你必須包括該生產線是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

爲了添加到您的PHP文件，你必須添加一個<script>標籤jQuery的功能和它裏面，你必須複製的jQuery功能。 不需要更改PHP文件的擴孔部分。

的片段：

// 
 
// When the document is Ready 
 
// 
 
$(function() { 
 
    // 
 
    // when you click a checkbox 
 
    // 
 
    $(':checkbox').on('change', function(e) { 
 
    var divClass = $(this).next().text(); 
 
    $('.' + divClass).toggle(this.checked); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form> 
 
    <p><input type="checkbox" checked="checked"><label>Plants</label></p> 
 

 
    <p><input type="checkbox" checked="checked"><label>Animals</label></p> 
 

 
    <p><input type="checkbox" checked="checked"><label>Humans</label></p> 
 
</form> 
 

 
<div class="Plants" style="display:block"> 
 
    <p>Grass</p> 
 
</div> 
 
<div class="Humans" style="display:block"> 
 
    <p>John</p> 
 
</div> 
 
<div class="Plants" style="display:block"> 
 
    <p>Flowesr</p> 
 
</div> 
 
<div class="Animals" style="display:block"> 
 
    <p>Lion</p> 
 
</div>