Birju
Reputation: 93
To display checkbox dynamically
The given below is my php code which consists of checkboxes and form, whatever user choose the parent and writes in textbox, the written value in textbox must get displayed as checkbox, and that should be displayed below the parent checkbox. This should not affect the code, while selecting the parent checkbox, all child checkbox must get selected, when single childbox is selected, parent checkbox must be selected, and when no child is selected parent also must not be selected:
This is add_checkbox.php
<!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>
<li><!--list of Property checkbox-->
<input type="checkbox" class="parent" />Property
<ul>
<li>
<input type="checkbox" class="child" />Edit Property
</li>
<li>
<input type="checkbox" class="child" />Remove Property
</li>
<li>
<input type="checkbox" class="child" />Add Property
</li>
</ul>
</li><!--end of Property checkbox-->
<li><!--list of Testimonial checkbox-->
<input type="checkbox" class="parent" />Testimonial
<ul>
<li>
<input type="checkbox" class="child" />Add
</li>
<li>
<input type="checkbox" class="child" />Remove
</li>
<li>
<input type="checkbox" class="child" />View
</li>
<li>
<input type="checkbox" />Edit
</li>
</ul>
</li><!--end of testimonial checkbox-->
<li><!--list of users checkbox-->
<input type="checkbox" class="parent" />Users
<ul>
<li>
<input type="checkbox" class="child" />Edit User
</li>
<li>
<input type="checkbox" class="child" />View User List
</li>
<li>
<input type="checkbox" class="child" />Add User
</li>
</ul>
</li><!--end of users checkbox-->
<li><!--list of membership checkbox-->
<input type="checkbox" class="parent" />Membership
<ul>
<li>
<input type="checkbox" class="child" />Edit Membership
</li>
<li>
<input type="checkbox" class="child" />Remove Membership
</li>
<li>
<input type="checkbox" class="child" />Add Membership
</li>
</ul>
</li><!--end of membership checkbox-->
</ul>
</form>
</div>
</div>
</div>
<div id="form_div">
<br /><br />
<div id="form_sub_div1">
<br /><br />
<form>
Parent:
<select id="select_parent" name="select_parent">
<option>Property</option>
<option>Edit Property</option>
<option>Remove Property</option>
<option>Add Property</option>
<option>Testimonial</option>
<option>Add</option>
<option>Remove</option>
<option>View</option>
<option>Edit</option>
<option>Users</option>
<option>Edit User</option>
<option>View User List</option>
<option>Add User</option>
<option>Membership</option>
<option>Edit Membership</option>
<option>Remove Membership</option>
<option>Add Membership</option>
</select>
<br /><br />
Add New Checkbox:
<input type="text" name="input_checkbox" />
<br /><br />
<input type="submit" value="Add" id="add_button" />
</form>
</div>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/checkbox.js"></script>
</html>
This is add_checkbox.js
$(function() {
$("li:has(li) > input[type='checkbox']").change(function() {
$(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
});
$("input[type='checkbox'] ~ ul input[type='checkbox']").change(function() {
$(this).closest("li:has(li)").children("input[type='checkbox']").prop('checked', $(this).closest('ul').find("input[type='checkbox']").is(':checked'));
});
});
This is add_checkbox.css
#maindiv{width:100% height:700px; margin:auto;}
#checkbox_div{width:250px; height:100%; float:left; background-color:gray; border:1px solid black;}
#checkbox_subdiv1{width:250px; height:7%; margin:auto; border:1px solid black;}
input[type="checkbox"]{cursor:pointer;}
#dropdown{margin-left:17%; cursor:pointer;}
p{position:relative; left:40px; top:1%;}
ul li{list-style-type:none;}
#form_div{background-color:lightgreen; width:1018px; height:463px; float:left;}
#form_sub_div1{background-color:lightyellow; width:350px; height:180px; margin:auto; border:1px solid black;}
#select_parent{cursor:pointer;}
#add_button{cursor:pointer;}
The given below is the output, and when user adds new checkbox, checkbox must get displayed below respective parent
Upvotes: 0
Views: 486
Answers (1)
Ejaz
Reputation: 1632
There is a small change that I have done in the your HTML. I have added a name attribute to the parent checkboxes. I would suggest the same for all checkboxes.
HTML
<!doctype html>
<html>
<head>
<title>Adding checkbox</title>
<link rel="stylesheet" type="text/css" href="hello.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>
<li><!--list of Property checkbox-->
<input type="checkbox" class="parent" name="Property"/>Property
<ul>
<li>
<input type="checkbox" class="child" />Edit Property
</li>
<li>
<input type="checkbox" class="child" />Remove Property
</li>
<li>
<input type="checkbox" class="child" />Add Property
</li>
</ul>
</li><!--end of Property checkbox-->
<li><!--list of Testimonial checkbox-->
<input type="checkbox" class="parent" name='Testimonial'/>Testimonial
<ul>
<li>
<input type="checkbox" class="child" />Add
</li>
<li>
<input type="checkbox" class="child" />Remove
</li>
<li>
<input type="checkbox" class="child" />View
</li>
<li>
<input type="checkbox" />Edit
</li>
</ul>
</li><!--end of testimonial checkbox-->
<li><!--list of users checkbox-->
<input type="checkbox" class="parent" name='Users'/>Users
<ul>
<li>
<input type="checkbox" class="child" />Edit User
</li>
<li>
<input type="checkbox" class="child" />View User List
</li>
<li>
<input type="checkbox" class="child" />Add User
</li>
</ul>
</li><!--end of users checkbox-->
<li><!--list of membership checkbox-->
<input type="checkbox" class="parent" name='Membership'/>Membership
<ul>
<li>
<input type="checkbox" class="child" />Edit Membership
</li>
<li>
<input type="checkbox" class="child" />Remove Membership
</li>
<li>
<input type="checkbox" class="child" />Add Membership
</li>
</ul>
</li><!--end of membership checkbox-->
</ul>
</form>
</div>
</div>
</div>
<div id="form_div">
<br /><br />
<div id="form_sub_div1">
<br /><br />
<form>
Parent:
<select id="select_parent" name="select_parent">
<option>Property</option>
<option>Edit Property</option>
<option>Remove Property</option>
<option>Add Property</option>
<option>Testimonial</option>
<option>Add</option>
<option>Remove</option>
<option>View</option>
<option>Edit</option>
<option>Users</option>
<option>Edit User</option>
<option>View User List</option>
<option>Add User</option>
<option>Membership</option>
<option>Edit Membership</option>
<option>Remove Membership</option>
<option>Add Membership</option>
</select>
<br /><br />
Add New Checkbox:
<input type="text" name="input_checkbox" />
<br /><br />
<input type='button' value="Add" id="add_button" />
</form>
</div>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="hello.js"></script>
</html>
.js File
$(document).ready(function() {
$('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" 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);
}
});
});
})
$(':checkbox.parent').filter(function() {
// create an object of 'this', as we are going to use it a couple of times.
var $this = $(this);
$this.on('click', function() {
// check if the parent checkbox is checked
if($this.is(':checked') == true) {
// checking all the child checkboxes
$this.next('ul').find('input:checkbox').prop('checked', true);
} else {
// unchecking all the child checkboxes
$this.next('ul').find('input:checkbox').prop('checked', false);
}
});
})
// parent checked when all children are checked else unchecked
$(':checkbox.child').on('click', function() {
var $this = $(this);
// parent checkbox
var $par_chekbx = $this.closest('ul').prev();
if ($this.not(':checked') && $par_chekbx.is(':checked')) {
$par_chekbx.prop('checked', false);
}
// checking if all children checkboxes are checked
if ($this.closest('ul').find('input:checkbox:not(:checked)').length == 0) {
$par_chekbx.prop('checked', true);
}
else {
$par_chekbx.prop('checked', false);
}
})
Hope it helps.
Upvotes: 1
Related Questions
- Show checkbox dynamically
- Jquery dynamic checkboxes
- Get dynamically value from checkbox jQuery
- dynamic selection of dynamic checkbox and implementation
- How to work on checkbox which is generated dynamically
- Creating Dynamic Checkbox using Jquery
- display data on selecting a checkbox
- Adding Checkboxes into jquery dilaogue box dynamically
- jQuery on a dynamically (PHP) created checkbox
- Can't Check Dynamic HTML CheckBox