0
下面给出的包括复选框，当父复选框被选中其所有子复选框也被选中，当选择单胎复选框，其父也被自动选中。
但是，当我添加新的复选框时，它不工作，当我检查新的孩子复选框，它的父母没有被选中。请帮忙。
的代码，如下所示：
这是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:
<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 />
<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;}
[？在jQuery中，如何将事件附加到动态HTML元素（HTTP的可能重复：//计算器。 com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements） – vijayP