文章/答案/技术大牛

发布

社区首页 >问答首页 >CheckboxTree，如果我激活它们(选中)，树也会关闭

问CheckboxTree，如果我激活它们(选中)，树也会关闭
EN

Stack Overflow用户

提问于 2021-11-03 09:47:52

回答 1查看 47关注 0票数 0

问题出在复选框，如果我激活它们(选中)，树也会关闭。但我希望它保持打开状态，直到我选中所有复选框。因此，当您单击复选框时，它将关闭。

$( 'input[type="checkbox"]' ).change( function ( e )

    {

        var checked = $( this ).prop( "checked" ),

            container = $( this ).parent(),

            siblings = container.siblings();



        container.find( 'input[type="checkbox"]' ).prop( {

            indeterminate: false,

            checked: checked

        } );



        function checkSiblings( el )

        {

            var parent = el.parent().parent(),

                all = true;



            el.siblings().each( function ()

            {

                return all = ( $( this ).children( 'input[type="checkbox"]' ).prop( "checked" ) === checked );

            } );



            if ( all && checked )

            {

                parent.children( 'input[type="checkbox"]' ).prop( {

                    indeterminate: false,

                    checked: checked



                } );



                checkSiblings( parent );



            } else if ( all && !checked )

            {

                parent.children( 'input[type="checkbox"]' ).prop( "checked", checked );

                parent.children( 'input[type="checkbox"]' ).prop( "indeterminate", ( parent.find( 'input[type="checkbox"]:checked' ).lenght > 0 ) );

                checkSiblings( parent );

            } else

            {

                el.parents( "li" ).children( 'input[type="checkbox"]' ).prop( {

                    indeterminate: true,

                    checked: false

                } );



            }

        }



        checkSiblings( container );

    } );



    $( document ).ready( function ()

    {

        $( "#tree .open" ).click( function ( e )

        {

            e.stopPropagation();

            $( this ).toggleClass( "open closed" );

        } );

    } );

#tree {

        width: auto;

        height: 350px;

        line-height: 20px;

        border: 1px solid #ccc;

        padding: 10px;

        margin: 10px;

        overflow: scroll;

        overflow-x: hidden;

    }

#tree .open > ul {

            display: none;

        }

#tree .open, #tree .closed {

            cursor: pointer;

        }

#tree .open::before {

                content: "\002B";

                font-size: 25px;

                display: inline-block;

                margin-left: 2px;

                width: 20px;

            }

#tree .closed::before {

                content: "\2212";

                font-size: 25px;

                display: inline-block;

                margin-left: 2px;

                width: 20px;

            }

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <link href="style.css" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <title>checkboxTree</title>

</head>

<body>

<!--CheckboxTree-->

<div class="col">

    <ul id="tree" style="list-style-type: none;">

        <li class="open">

            <input type="checkbox" name="tall" id="tall">

            <label for="tall">Item 1</label>



            <ul style="list-style-type: none;">

                <li>

                    <input type="checkbox" name="tall-1" id="tall-1">

                    <label for="tall-1">Item 1.1</label>

                </li>

                <li class="open">

                    <input type="checkbox" name="tall-2" id="tall-2">

                    <label for="tall-2">Item 1.1.1</label>



                    <ul style="list-style-type: none;">

                        <li>

                            <input type="checkbox" name="tall-2-1" id="tall-2-1">

                            <label for="tall-2-1">Item 1.1.2</label>

                        </li>

                        <li>

                            <input type="checkbox" name="tall-2-2" id="tall-2-2">

                            <label for="tall-2-2">Item 1.1.3</label>

                        </li>

                    </ul>

                </li>

                <li>

                    <input type="checkbox" name="tall-3" id="tall-3">

                    <label for="tall-3">Item 1.2</label>

                </li>

            </ul>

        </li>

        <li class="open">

            <input type="checkbox" name="short" id="short">

            <label for="short">Item 2</label>



            <ul style="list-style-type: none;">

                <li>

                    <input type="checkbox" name="short-1" id="short-1 " checked>

                    <label for="short-1">Item 2.1</label>

                </li>

                <li>

                    <input type="checkbox" name="short-2" id="short-2" disabled>

                    <label for="short-2">Item 2.2</label>

                </li>

                <li>

                    <input type="checkbox" name="short-3" id="short-3" checked disabled>

                    <label for="short-3">Item 2.3</label>

                </li>

                <li>

                    <input type="checkbox" name="short-3" id="short-3">

                    <label for="short-3">Item 2.3</label>

                </li>

                <li>

                    <input type="checkbox" name="short-3" id="short-3">

                    <label for="short-3">Item 2.4</label>

                </li>

                <li>

                    <input type="checkbox" name="short-3" id="short-3">

                    <label for="short-3">Item 2.5</label>

                </li>

            </ul>

        </li>

    </ul>

</div>

<!--CheckboxTree end-->

</body>

</html>

我没有办法激活复选框。当您单击复选框时，树将关闭。例如，单击项目1.1.3或项目1.2或项目1.1时，树将关闭。树必须保持打开状态，当我单击加号或减号时，它应该会关闭。

checkbox

tree

checkboxtree

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-03 10:21:07

您可以将stopPropagation添加到输入元素

$("#tree input").click(function(e) {
    e.stopPropagation();
});

$( 'input[type="checkbox"]' ).change( function ( e )

    {

        var checked = $( this ).prop( "checked" ),

            container = $( this ).parent(),

            siblings = container.siblings();



        container.find( 'input[type="checkbox"]' ).prop( {

            indeterminate: false,

            checked: checked

        } );



        function checkSiblings( el )

        {

            var parent = el.parent().parent(),

                all = true;



            el.siblings().each( function ()

            {

                return all = ( $( this ).children( 'input[type="checkbox"]' ).prop( "checked" ) === checked );

            } );



            if ( all && checked )

            {

                parent.children( 'input[type="checkbox"]' ).prop( {

                    indeterminate: false,

                    checked: checked



                } );



                checkSiblings( parent );



            } else if ( all && !checked )

            {

                parent.children( 'input[type="checkbox"]' ).prop( "checked", checked );

                parent.children( 'input[type="checkbox"]' ).prop( "indeterminate", ( parent.find( 'input[type="checkbox"]:checked' ).lenght > 0 ) );

                checkSiblings( parent );

            } else

            {

                el.parents( "li" ).children( 'input[type="checkbox"]' ).prop( {

                    indeterminate: true,

                    checked: false

                } );



            }

        }



        checkSiblings( container );

    } );



    $( document ).ready( function ()

    {

        $( "#tree .open" ).click( function ( e )

        {
            e.stopPropagation();
            $( this ).toggleClass( "open closed" );

        } );
        
        $("#tree input").click(function(e) {
            e.stopPropagation();
       });

    } );

#tree {

        width: auto;

        height: 350px;

        line-height: 20px;

        border: 1px solid #ccc;

        padding: 10px;

        margin: 10px;

        overflow: scroll;

        overflow-x: hidden;

    }

#tree .open > ul {

            display: none;

        }

#tree .open, #tree .closed {

            cursor: pointer;

        }

#tree .open::before {

                content: "\002B";

                font-size: 25px;

                display: inline-block;

                margin-left: 2px;

                width: 20px;

            }

#tree .closed::before {

                content: "\2212";

                font-size: 25px;

                display: inline-block;

                margin-left: 2px;

                width: 20px;

            }

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <link href="style.css" rel="stylesheet" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <title>checkboxTree</title>

</head>

<body>

<!--CheckboxTree-->

<div class="col">

    <ul id="tree" style="list-style-type: none;">

        <li class="open">

            <input type="checkbox" name="tall" id="tall">

            <label for="tall">Item 1</label>



            <ul style="list-style-type: none;">

                <li>

                    <input type="checkbox" name="tall-1" id="tall-1">

                    <label for="tall-1">Item 1.1</label>

                </li>

                <li class="open">

                    <input type="checkbox" name="tall-2" id="tall-2">

                    <label for="tall-2">Item 1.1.1</label>



                    <ul style="list-style-type: none;">

                        <li>

                            <input type="checkbox" name="tall-2-1" id="tall-2-1">

                            <label for="tall-2-1">Item 1.1.2</label>

                        </li>

                        <li>

                            <input type="checkbox" name="tall-2-2" id="tall-2-2">

                            <label for="tall-2-2">Item 1.1.3</label>

                        </li>

                    </ul>

                </li>

                <li>

                    <input type="checkbox" name="tall-3" id="tall-3">

                    <label for="tall-3">Item 1.2</label>

                </li>

            </ul>

        </li>

        <li class="open">

            <input type="checkbox" name="short" id="short">

            <label for="short">Item 2</label>



            <ul style="list-style-type: none;">

                <li>

                    <input type="checkbox" name="short-1" id="short-1 " checked>

                    <label for="short-1">Item 2.1</label>

                </li>

                <li>

                    <input type="checkbox" name="short-2" id="short-2" disabled>

                    <label for="short-2">Item 2.2</label>

                </li>

                <li>

                    <input type="checkbox" name="short-3" id="short-3" checked disabled>

                    <label for="short-3">Item 2.3</label>

                </li>

                <li>

                    <input type="checkbox" name="short-3" id="short-3">

                    <label for="short-3">Item 2.3</label>

                </li>

                <li>

                    <input type="checkbox" name="short-3" id="short-3">

                    <label for="short-3">Item 2.4</label>

                </li>

                <li>

                    <input type="checkbox" name="short-3" id="short-3">

                    <label for="short-3">Item 2.5</label>

                </li>

            </ul>

        </li>

    </ul>

</div>

<!--CheckboxTree end-->

</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69822706

复制

相似问题

问CheckboxTree，如果我激活它们(选中)，树也会关闭
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CheckboxTree，如果我激活它们(选中)，树也会关闭EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CheckboxTree，如果我激活它们(选中)，树也会关闭
EN