CheckboxTree，如果我激活它们（选中），树也会关闭
[英]CheckboxTree, if I activate them (checked), the tree also closes
问题描述
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.单击项目 1.1.3 或项目 1.2 或项目 1.1 树关闭时的示例。 The tree has to stay open and when I click plus or minus it should close.树必须保持打开状态，当我单击加号或减号时，它应该关闭。
1 个解决方案
解决方案1
0 2021-11-03 10:21:07
You can add stopPropagation to the input elements您可以将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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如果选中复选框，请激活一个字段 - If a checkbox is checked, activate a field
在 Formik 中使用 CheckboxTree - Using CheckboxTree inside Formik
React - CheckboxTree 过滤器 - React - CheckboxTree filter
选中复选框后如何激活功能？ - How to activate function when checkbox is checked?
错误说我缺少上肢，但是我检查了一下却找不到 - Error says I'm missing paratheses but I checked and I can not find them
对树的孩子也应用过滤器 - Apply filter to children of tree also
我如何构建这个函数，它接受一组树对象并将它们连接成一个树对象？ - how can i build this function that takes an array of tree object and concatenates them into one tree object?
JS：选中另一个复选框时取消选中该复选框，如果选中则也取消选中自身 - JS: uncheck box when another is checked but also uncheck itself if checked
加载选中的复选框并计算它们 - Load checked checkbox and calculate them
避免双循环插入节点并激活它们？ - Avoid double looping to insert nodes and activate them?
相关标签