How to work on checkbox which is generated dynamically

Question

The given below consist of checkbox, when parent checkbox is checked all its child checkbox also gets checked, when single child checkbox is selected, its parent also gets checked automatically.

But it does not works when I add new checkbox, When I check new child checkbox its parent does not get selected. Please help.

The code are as given below:

This is add_checkbox.php

<!doctype html>
<html>
 <head>
  <title>Adding checkbox</title>
  <link rel="stylesheet" type="text/css" href="test4.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 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-->
       <li><!--list of users checkbox-->
        <input type="checkbox" class="parent" name='Users'/>Users
         <ul>
          <li id="Edit_User">
           <input type="checkbox" class="child" name="Edit_User" />Edit_User
          </li>
          <li id="View_User_List">
           <input type="checkbox" class="child" name="View_User_List" />View_User_List
          </li>
          <li id="Add_User">
           <input type="checkbox" class="child" name="Add_User" />Add_User
          </li>
         </ul>
       </li><!--end of users checkbox-->
       <li><!--list of membership checkbox-->
        <input type="checkbox" class="parent" name='Membership'/>Membership
         <ul>
          <li id="Edit_Membership">
           <input type="checkbox" class="child" name="Edit_Membership" />Edit_Membership
          </li>
          <li id="Remove_Membership">
           <input type="checkbox" class="child" name="Remove_Membership" />Remove_Membership
          </li>
          <li id="Add_Membership">
           <input type="checkbox" class="child" name="Add_Membership" />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 action="test4.php" method="POST">
     Parent:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <select id="select_parent" name="select_parent">
      <option>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>
      <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 />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input type='button' value="Add" id="add_button" />
     <span id="demo"></span>
    </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="test4.js"></script>
</html>

This is addcheckbox.js

$(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" 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);
            }
        });


        $(':checkbox.child').filter(function() {
            if ($(this).attr("name") === chosen_parent) {
                $('#'+chosen_parent).append('<ul>'+temp_checkbox+'</ul>');
            }
        });
    });
 $(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;}

Possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) — vijayP, Jan 06 '17 at 08:00

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

Use delegated event like this:

$(document).on('click', 'input:button', function() {});

$(document).on('change', "li:has(li) > input[type='checkbox']", function() {});

$(document).on('change', "input[type='checkbox'] ~ ul input[type='checkbox']", function() {});

You can also check the documentation on http://api.jquery.com/on/

.on( events [, selector ] [, data ] )

Direct and delegated events
When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

@Birju Sorry, I forgot to add two fonction wich needed event delegation, it's corrected now, I suggest you to read about delegated events wich may help you for these kind of problems in the future — Dipiks, Jan 06 '17 at 10:07

score 1 · Answer 2 · answered Jan 06 '17 at 08:52

Try following way of event delegation technique for attaching change event on checkboxes:

$(function() {
  $(document).on("change", "li:has(li) > input[type='checkbox']", function() {
    $(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
  });

 $(document).on("change","input[type='checkbox'] ~ ul input[type='checkbox']",function() {
    $(this).closest("li:has(li)").children("input[type='checkbox']").prop('checked', $(this).closest('ul').find("input[type='checkbox']").is(':checked'));
  });   
 })

How to work on checkbox which is generated dynamically

2 Answers2