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;與相應類切換下面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>

例如：通過選中“植物”復選框，應隱藏“草”和“花”的div。

用php或javascript做到這一點的最優雅的方法是什么？

Answer 1

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

• 變更事件
• ：復選框選擇器
• 切換 （布爾）
• 下一個

如評論中所述：

在您的PHP文件中，您必須包含jQuery庫。 您必須包括的行是：

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

為了將jQuery函數添加到PHP文件，您必須添加<script>標記，並且必須在其中復制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>