0

我正在尝试根据是否选中复选框来隐藏/显示 DIV。

我的站点中显示了多个项目，每个项目都位于名为 .itemBox 的 DIV 下。复选框中显示了一些颜色，我想隐藏除用户选择的颜色之外的所有项目（取决于所选的复选框）。

我的 javascript 应该检查每个 .itemBox 项目的 ID（这是一种颜色），然后隐藏/显示。

到目前为止，我有我的表单和 javascript，但是当我选中复选框时没有任何反应。

形式：

div class="colors">
<?php
$colors = mysql_query("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1");
while ($colorBoxes = mysql_fetch_array($colors))
{
echo "<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'>   ".$colorBoxes[color_base1]."</font><br />";
}
?>
</div>

JAVASCRIPT：

<script>
    $('.colors').delegate('input:checkbox', 'change', function() { 
         if ($(this).attr('checked')) {
            $(".itemBox not(#" + $(this).val()  + ")").hide();
            $(".itemBox #" + $(this).val()).show();
        }
    })
</script>

输出：

<td><div name='item' id='".$info[color_base1]."' class='itemBox'> .....
4

3 回答 3

1

这是我的做法：

$(":checkbox").bind("click", function (event) {
     if($(this).is(':checked')) {
          $(".itemBox:not(#" + $(this).val()  + ")").hide();
          $(".itemBox[id='" + $(this).val() + "']").show();
     }else {
           //maybe you should do smth if checkbox is unchecked
     }
});

我认为你的错误是 :not 之前的空格，第二个选择器应该像 $(".itemBox[name='value']") 在 [.

于 2012-08-02T19:33:42.220 回答
0

假设基于您的代码$info[color_base1]并且$colorBoxes[color_base1]是相同的，可能是这样的，因为我并没有真正阅读 PHP 输出和数据库值，所以很难说？

$('input[type="checkbox"]').on('change', function() { 
    if (this.checked) {
        $(".itemBox").hide();
        $("#" + this.value).show();
    }
});
于 2012-08-02T19:20:18.897 回答
0

有几件事，您color在 jQuery 选择中使用作为类，但在您的 html 中，它定义为名称：

<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'>   ".$colorBoxes[color_base1]."</font>

如果你想使用复选框名称，你可以使用这样的选择器：

$('input[name=color]')....

记住.符号描述了一个类。

看看这个 jsFiddle：http: //jsfiddle.net/ufomammut66/h6m4H/

它非常简单，但您可以看到切换显示隐藏了下一个 itemBox div。您的 html 很可能不同，因此对您不起作用，但由于您没有全部发布，我无法使用正确的 html 路径。

于 2012-08-02T19:23:23.810 回答