用于隐藏和显示div的jQuery简单复选框（产品筛选）

我使用jQuery过滤页面上的产品项（隐藏和显示DIVs），我使用filter作为替代，因为PHP$\u GET有点过时，我们正试图通过jQuery来实现这一点。我使用filter（）和data属性

如何关闭当前选中的复选框（现有项除外）？ 我如何根据所选内容隐藏项目并在不隐藏时取消隐藏

HTML CSS JSFIDLE

---

您可以尝试使用类似的方法

首先删除复选框上的

onclick

属性-使用jQuery绑定

单击事件：

// bind to click
$('input[type="checkbox"]').click(function() {
    // any checked
    if ($('input[type="checkbox"]:checked').length > 0) {
        // hide all
        $('.products >div').hide();
        // loop checked and display relavent div
        $('input[type="checkbox"]:checked').each(function() {
            $('.products >div[data-category=' + this.id + ']').show();
        });
    } else {
        // none checked - show all
        $('.products >div').show();
    }
});​

但这不会恢复列表。因此，单击显示恐怖的恐怖并再次单击它将再次显示该列表。@Blackbenzkid添加了if语句
function filterCategory(id) {
    var pid=$(".productItem"); // Which product is it
    var checkid=$('#'+id); // The name of the checkbox form
    var cid=$(pid).data("category"); // The value of the checkbox form
    if ($(checkid).is(':checked')){
        $(pid).hide().filter(function () {var catId=$(this).data("category");return catId;}).show();
    } else {
        $(pid).show().filter(function () {var catId=$(this).data("category");return catId;}).show();
    }
}

.productItem{float:left;padding:5px;margin:5px;border:1px solid #eaeaea}
body{font-family:verdana}

// bind to click
$('input[type="checkbox"]').click(function() {
    // any checked
    if ($('input[type="checkbox"]:checked').length > 0) {
        // hide all
        $('.products >div').hide();
        // loop checked and display relavent div
        $('input[type="checkbox"]:checked').each(function() {
            $('.products >div[data-category=' + this.id + ']').show();
        });
    } else {
        // none checked - show all
        $('.products >div').show();
    }
});​