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

首先，使用jsFiddle展示您的代码是一个好习惯。

看这个小提琴：http : //jsfiddle.net/EtJ6L/5/

我对您的代码进行了一些重组，添加了一些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>

添加了CSS：

.restaurant {
    display: none;
}

添加了jQuery：

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

怎么运行的？

请注意，我更改了带有有关餐馆信息的信息块。现在restraunt的名称（其他信息也在那里）是div的内部html。另外，要实现所需的功能，必须将约束块与输入连接起来。

查看此块html，例如：

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

首先，名称是内部hmtl。另外，我id在该div的属性中添加了限制类型。

查看以下输入html（与restraunt连接）：

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

首先，我重新整理了一下。现在，它比以前更有效。另外，请注意id此输入的属性。因此，输入和div现在已连接。

带有restraunt信息的div从一开始就被隐藏。它是通过CSS代码实现的display: none。

现在看一下jQuery代码。

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

我们处理页面上所有复选框元素的更改操作。我们保存了单击复选框的ID。之后，我们切换.restraunt#xxx元素，其中xxx是此元素的ID。Div和输入的连接，因此这种方法将起作用。切换显示或隐藏元素。在这里阅读有关它的信息。

希望这会帮助你。

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

如果您遇到这种情况，那么该餐厅可以拥有1个以上的厨房。正如我之前所说，更好的方法是使用ajax请求。您将发送一些参数，例如bbq=true&pizza=true，服务器将处理此查询并根据查询返回一些响应。我为你写了一个例子。看这个小提琴：http : //jsfiddle.net/EtJ6L/8/。

例如，在复选框上，单击ajax请求发送至脚本bob.php。看，正在发送什么数据。开启后，bob.php您将处理此查询。喜欢的东西$pizza = $_POST['pizza']; if($pizza != "") { // add something to sql query }等。