Javascript 如果选中此复选框，则显示/隐藏div（通过搜索对象属性）

我正在制作一个网站，我被卡住了。我有6个复选框：

    <div class="checkbox">
       <label>
         <input type="checkbox" value="Pizza" id="pizza">
         Pizza 
        </label>
    </div>
    <div class="checkbox">
       <label>
         <input type="checkbox" value="BBQ" id="bbq">
         BBQ
        </label>
    </div>
    <div class="checkbox">
       <label>
         <input type="checkbox" value="Chicken" id="chicken">
         Chicken
        </label>
    </div>
    <div class="checkbox">
       <label>
         <input type="checkbox" value="Pasta" id="pasta">
         Pasta
        </label>
    </div>
    <div class="checkbox">
       <label>
         <input type="checkbox" value="Chinese" id="chinese">
         Chinese
        </label>
    </div>
    <div class="checkbox">
       <label>
         <input type="checkbox" value="Mexican" id="mexican">
         Mexican
        </label>
    </div>
    <div class="checkbox">
       <label>
         <input type="checkbox" value="Indian" id="indian">
         Indian
        </label>
    </div>
</div>

    <div class="col-xs-7">
        <div class = "restaurant" id="Paradiso">
    </div>
    </div>
    <div class="col-xs-7">
        <div class = "restaurant" id="Wingsy">
    </div>
    </div>

---

然后我一直在使用代码来获取复选框的值并搜索餐厅，只显示拥有该属性的餐厅，隐藏其他没有该属性的餐厅。

首先，使用JSFIDLE显示代码是一种很好的做法

看这把小提琴：

我对你的代码进行了一些重构，添加了一些css和js

新的HTML代码：

<div class="checkbox">
    <input type="checkbox" value="Pizza" id="pizza" />
    <label>Pizza</label>
</div>
<div class="checkbox">
    <input type="checkbox" value="BBQ" id="bbq" />
    <label>BBQ</label>
</div>
<div class="checkbox">
    <input type="checkbox" value="Chicken" id="chicken" />
    <label>Chicken</label>
</div>
<div class="checkbox">
    <input type="checkbox" value="Pasta" id="pasta" />
    <label>Pasta</label>
</div>
<div class="checkbox">
    <input type="checkbox" value="Chinese" id="chinese" />
    <label>Chinese</label>
</div>
<div class="checkbox">
    <input type="checkbox" value="Mexican" id="mexican" />
    <label>Mexican</label>
</div>
<div class="checkbox">
    <input type="checkbox" value="Indian" id="indian" />
    <label>Indian</label>
</div>
<div class="col-xs-7">
    <div class="restaurant" id="pizza">Paradiso</div>
</div>
<div class="col-xs-7">
    <div class="restaurant" id="bbq">Wingsy</div>
</div>

添加jQuery:

$(":checkbox").change(function () {
    var id = $(this).attr('id');
    $(".restaurant#" + id).toggle(this.checked);
});

它是如何工作的？

请注意，我用restarunts的信息更改了block。现在restarun的名称（以及其他信息也将在那个里）是div的内部html。同样，为了实现您想要的，您必须将restarun块和输入连接起来

查看此块html，例如：

<div class="col-xs-7">
    <div class="restaurant" id="bbq">Wingsy</div>
</div>

首先，我重新做了一点。现在它比以前更有效了。另外，请注意此输入的

id

属性。因此，输入和div现在已连接

从一开始，就隐藏了包含其信息的div。它是通过css代码

显示：none

实现的

现在看看jQuery代码

$(":checkbox").change(function () {
    var id = $(this).attr('id');
    $(".restaurant#" + id).toggle(this.checked);
});

我们正在处理页面上所有复选框元素的更改操作。我们保存单击的复选框的id。之后，我们切换

.restarun#xxx

元素，其中xxx是该元素的id。Div和input是连接的，所以这种方法可以工作。切换显示或隐藏元素。读一读

希望这对你有帮助

注意我认为更好的方法是根据选中的复选框向服务器发出ajax请求，然后缓存并输出ajax响应

若您有这种情况，那个么您可以拥有不止一个厨房，正如我前面所说的，更好的方法是使用ajax请求。您将发送一些参数，如

bbq=true&pizza=true

，服务器将处理此查询并根据查询返回一些响应。我为你写了一个例子。看这把小提琴

---

例如，在复选框上单击ajax请求发送到脚本

bob.php

。看，它发送的是什么数据。在

bob.php

上，您将处理此查询。类似于

$pizza=$\u POST['pizza']；如果（$pizza！=“”）{//向sql查询添加内容}

等

Tnx以获得问题解决方案。这很好。这是我的错，我没有提到以下内容：例如，将有比萨饼、烧烤和鸡肉式厨房的餐厅。这是用这段代码做不到的。对不起，我已经回答了这个问题。编辑你的问题。我编辑了我的答案。在这种情况下，必须使用ajax请求。这将是一个肮脏的解决方案，正如我所想，在那里使用纯jQuery。我添加了带有ajax请求的示例。希望这对你有帮助。

<div class="col-xs-7">
    <div class="restaurant" id="bbq">Wingsy</div>
</div>

<div class="checkbox">
    <input type="checkbox" value="BBQ" id="bbq" />
    <label>BBQ</label>
</div>

$(":checkbox").change(function () {
    var id = $(this).attr('id');
    $(".restaurant#" + id).toggle(this.checked);
});