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>