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> 

上記のチェックボックスは、例えば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> 

を変更することによって、記載クラスで以下のdivの表示を切り替える必要があります：芝生と、植物のチェックボックスをucheckingにより divをと花は隠されるべきです。

phpやjavascriptでこれを達成する最もエレガントな方法は何ですか？あなたが使用することができ、あなたのHTML構造によれば

Answer 1

：

• 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>