Question

下面给出的是复选框，当选中父复选框时，它的所有子复选框也会被选中，当选中单子复选框时，它的父复选也会自动检查。

但是当我添加新复选框时它不起作用，当我检查新子复选框时，其父级未被选中。请帮忙。

代码如下：

这是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>

这是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'));
  });   
 })
})

这是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;}

Answer 1

使用这样的委托事件：

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

您还可以查看http://api.jquery.com/on/

上的文档

.on（events [，selector] [，data]）

直接和委派活动
  提供选择器时，事件处理程序称为   授权。直接在事件发生时不会调用处理程序   绑定元素，但仅适用于后代（内部元素）   匹配选择器。 jQuery从事件目标起泡事件   到附加处理程序的元素（即最里面的）   最外面的元素）并为其中的任何元素运行处理程序   匹配选择器的路径。

Answer 2

尝试使用以下方式将事件委派技术附加到复选框上的change事件：

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

如何处理动态生成的复选框

2 个答案: