問題在于復選框，如果我激活它們（選中），樹也會關閉。但我希望它保持打開狀態，直到我選擇了所有復選框。因此，當您單擊復選框時，它會關閉。
$( '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>我無法激活復選框。單擊復選框時，樹將關閉。例如，當單擊 Item 1.1.3 或 Item 1.2 或 Item 1.1 樹關閉時。樹必須保持打開狀態，當我單擊加號或減號時，它應該關閉。
uj5u.com熱心網友回復：
您可以添加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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/348608.html
標籤：javascript 查询 复选框 树 复选框树
上一篇：如何隱藏jQuery懸停