Question

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

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

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

到目前为止，我有自己的表单和javascript，但在检查Checkbox时没有任何反应。

FORM：

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

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

我认为你的错误是前面的空格：不是第二个选择器应该像$（“。itemBox [name ='value']”）之前没有空格[。

Answer 2

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

$('input[type="checkbox"]').on('change', function() { 
    if (this.checked) {
        $(".itemBox").hide();
        $("#" + this.value).show();
    }
});

Answer 3

很多事情，你在jQuery选择中使用color作为类，但在你的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路径。

Jquery使用Checkbox根据其ID显示/隐藏DIV

3 个答案: