The given below is my code. I want it to run in such a way that if I select 'Edit Property' as parent and add 'abc' as new checkbox, it gets added as the child of Edit Property, second time if I select 'abc' as parent and add new checkbox 'xyz', it must get added below abc as a child of abc. Simillarly it must work if I take 'xyz' parent and and new child. The given below is my code:
$('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>
