0
以下は私のコードです。親として 'Edit Property'を選択し、新しいチェックボックスとして 'abc'を追加すると、それがEdit Propertyの子として追加され、親として 'abc'を選択して追加するような方法で実行したい新しいチェックボックス 'xyz'は、abcの下にabcの子として追加する必要があります。 Simillarly私は 'xyz'親と新しい子供を取る場合、それは動作する必要があります。ダイナミックチェックボックスの動的選択と実装
$('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>
ありがとうございます。それは本当にうまくいく – Birju
私は助けることができてうれしい。あなたが答えが親切にそれを受け入れるか、upvote助けていると感じる場合。 –
彼は決して答えを受け入れない –