반응형
jQuery를 사용하여 트리 메뉴(구조)를 가진 체크박스 목록을 만드는 예제입니다. 펼치기/접기 기능이 있으며, 각 노드의 체크박스를 클릭하면 하위 노드의 체크박스도 모두 선택 또는 해제됩니다. '선택 확인하기' 버튼을 클릭하면 선택된 노드의 ID를 알려주는 알림 창이 뜨게 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul.tree {
list-style-type: none;
}
ul.tree ul {
list-style-type: none;
}
ul.tree li::before {
content: "▶";
margin-right: 5px;
}
.btn-check {
margin-top: 10px;
}
</style>
</head>
<body>
<button class="btn-check">선택 확인하기</button>
<ul class="tree">
<li id="root"><input type="checkbox" id="root-checkbox"> Root
<ul>
<li id="child1"><input type="checkbox" id="child1-checkbox"> Child 1
<ul>
<li id="grandchild1"><input type="checkbox" id="grandchild1-checkbox"> Grandchild 1</li>
<li id="grandchild2"><input type="checkbox" id="grandchild2-checkbox"> Grandchild 2</li>
</ul>
</li>
<li id="child2"><input type="checkbox" id="child2-checkbox"> Child 2</li>
</ul>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 처음에 모든 자식 요소를 감춥니다.
$('ul.tree ul').hide();
// 루트 요소와 자식 요소에 클릭 이벤트를 추가합니다.
$('ul.tree li').click(function(e) {
if (e.target.tagName !== 'INPUT') {
e.stopPropagation();
$(this).children('ul').toggle();
}
});
// 체크박스 클릭 시 토글되지 않도록 이벤트 막기
$('input[type="checkbox"]').click(function(e) {
e.stopPropagation();
if ($(this).parent().find('ul').length > 0) {
const isChecked = $(this).prop('checked');
$(this).parent().find('input[type="checkbox"]').prop('checked', isChecked);
}
});
// 버튼 클릭 시 선택된 노드 확인
$('.btn-check').click(function() {
const selectedNodes = [];
$('input[type="checkbox"]:checked').each(function() {
selectedNodes.push($(this).parent().attr('id'));
});
alert(selectedNodes.join('\n'));
});
});
</script>
</body>
</html>
반응형
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] input, textarea 커서 위치 확인하고 텍스트 감지하기 (selectionStart, selectionEnd, setSelectionRange) (0) | 2023.08.07 |
|---|---|
| [jQuery] jqGrid gridComplete 이벤트로 마우스 커서 변경하기 (0) | 2023.08.03 |
| [jQuery] UI Tabs 사용하기 (가로/세로 tabs, tab 추가하기) (0) | 2023.07.27 |
| [jQuery] 이벤트 등록/해제하기 사용법,예제($(document).on(),$(document).off()) (0) | 2023.07.19 |
| [jQuery] jstree checkbox 사용법, 예제, 이벤트 핸들링 (0) | 2023.07.18 |
댓글