Birju
Reputation: 93
dynamic selection of dynamic checkbox and implementation
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>Upvotes: 0
Views: 34
Answers (1)
Kalimah
Reputation: 11437
I have changed your code to this:
$('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').filter(function() {
if ($(this).attr("name") === chosen_parent) {
// First check, are there any ul elements
var ul = $(this).siblings('ul');
if(ul.length == 0)
{
$(this).parent().append('<ul>' + temp_checkbox + '</ul>');
}else
{
ul.append(temp_checkbox);
}
// $(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>
<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>It is working but I think you need to change HTML structure to make it more efficient and accurate. Using $(this).attr("name") might not be the best solution as it will try to match spaces as well. I think using data-* attr is a better approach.
Also, try to wrap li inner with div or span to be able to add child ul.
Upvotes: 1
Related Questions
- Jquery dynamic checkboxes
- Dynamic Checkbox selector in jquery
- How to work on checkbox which is generated dynamically
- To display checkbox dynamically
- How can I check dynamic checkboxes with jquery
- Creating Dynamic Checkbox using Jquery
- Jquery, dynamic checkbox selecting
- Adding Checkboxes into jquery dilaogue box dynamically
- jQuery on a dynamically (PHP) created checkbox
- To select a Dynamic checkbox using it's value