0
아래 주어진 내용은 제 코드입니다. 그런 식으로 실행하여 'Edit Property'를 부모로 선택하고 'abc'를 새 체크 박스로 추가하면 Edit 속성의 자식으로 추가됩니다. 두 번째로 'abc'를 부모로 선택하고 추가합니다. 새로운 체크 박스 'xyz'는 abc 아래에 abc의 하위 항목으로 추가되어야합니다. 내가 'xyz'부모와 새 자녀를 데려 간다면 Simillarly가 작동해야합니다.동적 체크 박스 및 구현의 동적 선택
$('input:button').on('click', function() {
// get the name of the parent selected from the dropdown
var chosen_parent = $('#select_parent option:selected').text();
// get text from 'Add New Checkbox' textbox
var child_name = $(':text').attr("name", "input_checkbox").val();
// create a checkbox to append under the parent checkbox
var temp_checkbox = '<li><input type="checkbox" class="child2" id=id_' + child_name + ' name=' + child_name + '>' + child_name + '</li>';
// appending the checkbox under the selected parent
$(':checkbox.parent').filter(function() {
if ($(this).attr("name") === chosen_parent) {
$(this).next('ul').append(temp_checkbox);
$('#select_parent').append('<option>' + child_name + '</option>');
//alert(chosen_parent);
}
});
$(':checkbox.child').filter(function() {
if ($(this).attr("name") === chosen_parent) {
$('#' + chosen_parent).append('<ul>' + temp_checkbox + '</ul>');
$('#select_parent').append('<option>' + child_name + '</option>');
}
});
});
$('#add_button').attr('disabled', true);
$('#inputcheckbox').keyup(function() {
if ($(this).val().length != 0) {
$('#add_button').attr('disabled', false);
} else {
$('#add_button').attr('disabled', true);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title>Adding checkbox</title>
<link rel="stylesheet" type="text/css" href="css/add_checkbox.css" />
</head>
<body>
<div id="maindiv">
<br />
<br />
<div id="checkbox_div">
<div id="checkbox_subdiv1">
<p>Manage Permission</p>
</div>
<div id="subdiv2">
<form action="#" method="POST" id="myform">
<br />
<select id="dropdown">
<option>subsubfgh</option>
</select>
<br />
<ul id='#treeList'>
<li>
<!--list of Property checkbox-->
<input type="checkbox" class="parent" name="Property" />Property
<ul id="sub">
<li id="Edit_Property">
<input type="checkbox" class="child" name="Edit_Property" />Edit_Property
</li>
<li id="Remove_Property">
<input type="checkbox" class="child" name="Remove_Property" />Remove_Property
</li>
<li id="Add_Property">
<input type="checkbox" class="child" name="Add_Property" />Add_Property
</li>
</ul>
</li>
<!--end of Property checkbox-->
<li>
<!--list of Testimonial checkbox-->
<input type="checkbox" class="parent" name='Testimonial' />Testimonial
<ul>
<li id="Add">
<input type="checkbox" class="child" name="Add" />Add
</li>
<li id="Remove">
<input type="checkbox" class="child" name="Remove" />Remove
</li>
<li id="View">
<input type="checkbox" class="child" name="View" />View
</li>
<li id="Edit">
<input type="checkbox" class="child" name="Edit" />Edit
</li>
</ul>
</li>
<!--end of testimonial checkbox-->
</ul>
</form>
</div>
</div>
<div id="form_div">
<br />
<br />
<div id="form_sub_div1">
<br />
<br />
<form action="test4.php" method="POST">
Parent:
<select id="select_parent" name="select_parent">
<option id="p">Property</option>
<option>
<p>Edit_Property</p>
</option>
<option>
<p>Remove_Property</p>
</option>
<option>
<p>Add_Property</p>
</option>
<option>Testimonial</option>
<option>
<p>Add</p>
</option>
<option>
<p>Remove</p>
</option>
<option>
<p>View</p>
</option>
<option>
<p>Edit</p>
</option>
</select>
<br />
<br />Add New Checkbox:
<input type="text" name="input_checkbox" id="inputcheckbox" />
<br />
<br />
<input type='button' value="Add" id="add_button" />
<span id="demo"></span>
</form>
</div>
</div>
</div>
</body>
대단히 감사합니다. 그것은 정말로 작용한다 – Birju
내가 도울 수 있기 때문에 기쁘다. 만약 당신이 대답을 친절하게 받아들이거나 upvote 도움이 생각합니다. –
그는 대답을 결코 받아들입니다. –