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 in 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. 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 plus or minus it should close.
Aucun commentaire:
Enregistrer un commentaire