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的可见性与相应的类别

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

例如：通过取消选中Plants复选框，应隐藏带草和花的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文件添加jQuery函数，您必须添加<script>标记，并且在其中必须复制jQuery函数。没有必要更改PHP文件的扩孔部分。

摘录：

＆＃13;

//
// 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);
  });
});

＆＃13;

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

＆＃13;

php javascript过滤内容

1 个答案: