The problem is with checkboxes, if I activate them (checked), the tree also closes. But I want it to stay open until I have selected all checkboxes. So when you click on the checkbox, it gets closed.
$( '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>I have no way of activating the checkboxes. The tree closes when you click on the checkbox. For example when clicking on Item 1.1.3 or Item 1.2 or Item 1.1 Tree closes. The tree has to stay open and when I click the plus or minus it should close.
CodePudding user response：
You can add stopPropagation to the input elements
$("#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>