Question

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

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

情景：

我有类别表格如下：
1级 - 主猫
2级 - 子猫
3级 - 子猫
使用css下拉菜单显示类别选项和复选框。

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

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

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

slideUp / Down功能

<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来编写 选中/取消选中功能

<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级猫复选框的2级猫复选框时，将发生li slideUp / Down因为3级猫复选框现在已经改变了，但这也没有发生。

以下是slideUp / Down的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

我认为您要做的是根据较高级别的类别过滤结果。如果是这种情况，我相信这一行：

echo("$(\"." . $catdatarow['catid'] . "\").prop(\"checked\",$(\"#cat" . $catdatarow['catid'] . "\").prop(\"checked\"))");

和这一行

echo("$(\"." . $subcatdatarow['subcatid'] . "\").prop(\"checked\",$(\"#subcat" . $subcatdatarow['subcatid'] . "\").prop(\"checked\"))");

需要更改为

   echo("$(\"." . $catdatarow['catid'] . "\").each(function(){($this).prop(\"checked\",$(\"#cat" . $catdatarow['catid'] . "\"))}");

和

 echo("$(\"." . $subcatdatarow['subcatid'] . "\").each($(this).prop(\"checked\",$(\"#subcat" . $subcatdatarow['subcatid'] . "\"))}");

这样您就可以取消选中与给定父类别相关联的所有复选框（通过html类）。

希望这有帮助。

Answer 2

尝试类似

的内容

$(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

复选框更改事件 - jquery 1.10.12

2 个答案: