下面给出的是我的代码。我希望它以这样的方式运行：如果我选择编辑属性＆＃39;作为父母并添加＆＃39; abc＆＃39;作为新复选框，它会被添加为编辑属性的子项，如果我选择＆＃39; abc＆＃39;作为父级并添加新复选框＆＃39; xyz＆＃39;，必须在abc下面添加abc。 Simillarly它必须工作，如果我采取＆＃39; xyz＆＃39;父母和新的孩子。下面给出的是我的代码：
$('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>
答案 0 :(得分：1)
我已将您的代码更改为：
$('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>
它正在运行但我认为您需要更改HTML结构以使其更高效和准确。使用$（this）.attr（“name”）可能不是最佳解决方案，因为它也会尝试匹配空格。我认为使用data- * attr是一种更好的方法。
另外，尝试使用div或span包装li inner以便能够添加子ul。