复选框更改事件 - jquery 1.10.12

Question

我在使用复选框搜索过滤器时遇到问题。

我使用的是 jquery 1.10.2，并且在在线测试其他解决方案时结果好坏参半，但我无法使其正常工作。

场景：

我有如下分类表：
1 级 - 主猫
2级 - 子猫
3级 - 子猫
类别选项使用 CSS 下拉菜单与复选框一起显示。

每个类别复选框都有两个jquery函数如下：

函数1 -：slideUp/Down 结果显示在 ul/li 页面上。

功能 2 -：1 级和 2 级复选框必须分别选中/取消选中 2 级和 3 级复选框

上滑/下滑功能

<script type="text/javascript">
    $(document).ready(function () {
    $('.results > li').hide();

        $('div.tags').find('input:checkbox').on('change', function () {
            $('.results > li').slideUp(400);
            $('div.tags').find('input:checked').each(function () {
                $('.results > li.' + $(this).attr('rel')).slideDown(400);
            });
        });
    });  
</script>

由于类别众多，我选择使用 php 来编写
check/uncheck 函数：

<script type="text/javascript">
<?php
$catdata = mysql_query("SELECT * FROM categories order by catname;");
    while ($catdatarow = mysql_fetch_array($catdata)) {
        echo("$(document).ready(function(){");
            echo("$(\"#cat" . $catdatarow['catid'] . "\").on('change', function(){");
                echo("$(\"." . $catdatarow['catid'] . "\").prop(\"checked\",$(\"#cat" . $catdatarow['catid'] . "\").prop(\"checked\"))");
            echo("})");
        echo("});");
    }
?>
</script>

<script type="text/javascript">
<?php
$subcatdata = mysql_query("SELECT * FROM subcategories order by subcatname;");
    while ($subcatdatarow = mysql_fetch_array($subcatdata)) {
        echo("$(document).ready(function(){");
            echo("$(\"#subcat" . $subcatdatarow['subcatid'] . "\").on('change', function(){");
                echo("$(\"." . $subcatdatarow['subcatid'] . "\").prop(\"checked\",$(\"#subcat" . $subcatdatarow['subcatid'] . "\").prop(\"checked\"))");
            echo("})");
        echo("});");
    }
?>
</script>

问题：
虽然所有基本功能都可以正常工作，但我的问题如下：

如果我点击 2 级猫复选框，则所有 3 级猫复选框都会被选中，如果我点击 1 级猫复选框，则所有 2 级猫复选框都会被选中，但根据我的理解，点击 1 级时应该根据“更改”事件检查相同选择的第 2 级和第 3 级复选框，但这不会发生。

这个问题也适用于 slideUp/Down 函数，因为 li 项目与 3 级 cat 复选框相关联。手动单击 3 级复选框将导致 li 项目向上滑动/向下滑动，并且假设在给定更改事件的情况下，当单击检查所有 3 级 cat 复选框的 2 级 cat 复选框时，将发生 li slideUp/Down因为 3 级 cat 复选框现在已更改，但这也不会发生。

以下是上滑/下滑的 li 结果示例：

<ul class="results">
    <li class="1002">
    <table>
        <tr>
            <td style="padding:15px;"><img src="images/image.jpg" alt="" width="60" height="80" border="0" /></td>
            <td style="padding:15px;"><h4>Result A</h4>Description</td>
        </tr>
    </table>
    </li>
</ul>

现在我知道我一定有问题或遗漏了什么，请您指出正确的方向吗？

谢谢。

类别的 HTML：

<ul>
    <li>
        <input type="checkbox" rel="1020" id="cat1020" />Level 1 Cat 1
            <ul>
                <li>
                    <input type="checkbox" rel="2465" id="subcat2465" class="1020" />Level 2 Cat 1
                </li>
                <li>
                    <input type="checkbox" rel="2452" id="subcat2452" class="1020" />Level 2 Cat 2
                </li>
                <li>
                    <input type="checkbox" rel="2464" id="subcat2464" class="1020" />Level 2 Cat 3
                </li>
                <li>
                    <input type="checkbox" rel="2463" id="subcat2463" class="1020" />Level 2 Cat 4
                </li>
            </ul>
    </li>
    <li>
        <input type="checkbox" rel="1015" id="cat1015" />Level 1 Cat 2
            <ul>
                <li>
                    <input type="checkbox" rel="2346" id="subcat2346" class="1015" />Level 2 Cat 5
                </li>
                <li>
                    <input type="checkbox" rel="2341" id="subcat2341" class="1015" />Level 2 Cat 6
                        <ul>
                            <li>
                                <input type="checkbox" rel="5006" class="2341" />Level 3 Cat 1
                            </li>
                            <li>
                                <input type="checkbox" rel="5005" class="2341" />Level 3 Cat 2
                            </li>
                            <li>
                                <input type="checkbox" rel="5004" class="2341" />Level 3 Cat 3
                            </li>
                        </ul>
                </li>
                <li>
                    <input type="checkbox" rel="2340" id="subcat2340" class="1015" />Level 2 Cat 7
                </li>
            </ul>
    </li>
</ul>

Answer 1

试试类似的东西

$(document).ready(function () {
    $('.results > li').hide();
    $('ul input[type="checkbox"][rel]').change(function () {
        $(this).next('ul').find('> li > input')[this.checked ? 'not' : 'filter'](':checked').prop('checked', this.checked).trigger('change');
        var $target = $('.results li.' + $(this).attr('rel'));
        if (this.checked) {
            $target.stop(true, true).slideDown();
        } else {
            $target.stop(true, true).slideUp();
        }
    })
});

演示：Fiddle