Question

我制作了一个网站，而且我被困住了。我有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>

还有更多的餐厅类div。

所以，我想说：当我们选中复选框时，他们会搜索餐馆，如果那个餐馆有复选框中的属性，则会显示。否则就会隐藏。

示例：

 var typeOfKitchen = ['pizza','bbq','chicken','pasta','chinese','mexican','indian'];

 var restaurants = new Array();

 restaurant = new Object();
 restaurant.[name] = "Paradiso";
 restaurant.[type] = typeOfKitchen[0];
 restaurants.push(restaurant);

 restaurant = new Object();
 restaurant.[name] = "Wingsy";
 restaurant.[type] = typeOfKitchen[2];
 restaurants.push(restaurant);

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

Answer 1

首先，最好使用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);
});

如何运作？

请注意，我用限制信息更改了阻止。现在，限制的名称（以及其他信息也将在那里）是div的内部html。此外，要实现您想要的功能，您必须将限制块与输入连接起来。

查看此块html，例如：

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

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

查看此输入html（与限制相关联）：

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

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

带有限制信息的Div从开始隐藏。它是通过css代码display: none实现的。

现在来看看jQuery代码。

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

我们处理页面上所有复选框元素的更改操作。我们保存了复选框的id。之后我们切换.restraunt#xxx元素，其中xxx是此元素的id。 Div和输入是连接的，因此这种方法可行。切换显示或隐藏元素。请阅读here。

希望这会对你有所帮助。

注意我认为更好的方法是根据选中的复选框向服务器发出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 }等等。

如果选中复选框show / hide div（通过搜索对象属性）

1 个答案: