[英]How to add a checked checkbox element into Div dynamically?
I want to make a JavaScript function
, which, after pressing a button
, takes the list of checkbox
elements with their content, checks all the checkboxes
, creates a div
element with these checkboxes
and writes the result to the HTML
form. 我想创建一个
JavaScript function
,在按下button
,获取checkbox
元素列表及其内容, 检查所有 checkboxes
,创建带有这些checkboxes
的div
元素,并将结果写入HTML
表单。
Here is my code: 这是我的代码:
function confirmDrivers() {
$('#selectedList').find('.chk').prop("checked", true);
var list = document.getElementById('selectedList').getElementsByTagName("li");
var myForm = document.getElementById('formInput');
var text = "<strong>Selected Drivers: </strong> <br><br>";
var myDiv = document.createElement("div");
myDiv.setAttribute("id","selectedInputDrivers");
myDiv.style.overflowY = "auto";
myDiv.style.maxHeight = "100px";
myDiv.style.maxWidth = "250px";
for (i = list.length - 1; i >= 0; i--) {
myDiv.innerHTML = list[i].innerHTML+'<br>'+myDiv.innerHTML;
}
$("formInput").find('.chk').prop("checked", true);
myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML;
myForm.innerHTML = text + myForm.innerHTML;
}
Here is the HTML Div element with the list of checkbox elements. 这是带有复选框元素列表的HTML Div元素。 They also appear dynamically.
它们也是动态出现的。 Initially, Div is empty.
最初,Div是空的。
<div id = "selectedList" class = "col" style=" max-height:200px; max-width:500px;display: inline-block; background:#A8D9F1; overflow-y:auto">
<strong style="margin-right:10px">Selected List of Drivers</strong>
<input type="button" style="margin-right:10px" value="Remove All" name="removeAllDr" onclick="removeAllDrivers()" />
<input type="button" id="confirmD" value="Confirm" name="confirm" onclick="confirmDrivers()" />
<br><br>
</div>
And this is the HTML form, where I want my result to appear: 这是HTML表单,我希望我的结果出现在:
<form id="formInput">
</form>
The problem here is that it checks all the checkboxes
in my list, but in the resulting HTML
form they appear unchecked again. 这里的问题是它检查了我的列表中的所有
checkboxes
,但在生成的HTML
表单中,它们再次出现未选中状态。 What is wrong with it? 这有什么问题 ? Thank you
谢谢
Besides replacing prop() to attr() as Rik Lewis correctly recommended you can alternately put the line 除了将prop()替换为attr(),正如Rik Lewis正确推荐的那样,您可以交替使用该线
$("formInput").find('.chk').prop("checked", true); $(“formInput”)。find('。chk')。prop(“checked”,true);
at the bottom of the function and add the # character in front the selector id like this: 在函数的底部,并在选择器ID前面添加#字符,如下所示:
function confirmDrivers() {
$('#selectedList').find('.chk').prop("checked", true);
var list = document.getElementById('selectedList').getElementsByTagName("li");
var myForm = document.getElementById('formInput');
var text = "<strong>Selected Drivers: </strong> <br><br>";
var myDiv = document.createElement("div");
myDiv.setAttribute("id","selectedInputDrivers");
myDiv.style.overflowY = "auto";
myDiv.style.maxHeight = "100px";
myDiv.style.maxWidth = "250px";
for (i = list.length - 1; i >= 0; i--) {
myDiv.innerHTML = list[i].innerHTML+'<br>'+myDiv.innerHTML;
}
myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML;
myForm.innerHTML = text + myForm.innerHTML;
$("#formInput").find('.chk').prop("checked", true);
}
function confirmDrivers() { $('#selectedList').find('.chk').prop("checked", true); var list = document.getElementById('selectedList').getElementsByTagName("li"); var myForm = document.getElementById('formInput'); var text = "<strong>Selected Drivers: </strong> <br><br>"; var myDiv = document.createElement("div"); myDiv.setAttribute("id", "selectedInputDrivers"); myDiv.style.overflowY = "auto"; myDiv.style.maxHeight = "100px"; myDiv.style.maxWidth = "250px"; for (i = list.length - 1; i >= 0; i--) { myDiv.innerHTML = list[i].innerHTML + '<br>' + myDiv.innerHTML; } myForm.innerHTML = myDiv.outerHTML + myForm.innerHTML; myForm.innerHTML = text + myForm.innerHTML; $("#formInput").find('.chk').prop("checked", true); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="selectedList" class="col" style=" max-height:200px; max-width:500px;display: inline-block; background:#A8D9F1; overflow-y:auto"> <strong style="margin-right:10px">Selected List of Drivers</strong> <input type="button" style="margin-right:10px" value="Remove All" name="removeAllDr" onclick="removeAllDrivers()" /> <input type="button" id="confirmD" value="Confirm" name="confirm" onclick="confirmDrivers()" /> <br> <br> <ul> <li> <input type="checkbox" class="chk" value="test" /> </li> <li> <input type="checkbox" class="chk" value="test" /> </li> <ul> </div> <form id="formInput"> </form>
<div id="cblist">
<input type="checkbox" value="first checkbox" id="cb1" /> <label for="cb1">first checkbox</label>
</div>
<input type="text" id="txtName" />
<input type="button" value="ok" id="btnSave" />
<script type="text/javascript">
$(document).ready(function() {
$('#btnSave').click(function() {
addCheckbox($('#txtName').val());
});
});
function addCheckbox(name) {
var container = $('#cblist');
var inputs = container.find('input');
var id = inputs.length+1;
var html = '<input type="checkbox" id="cb'+id+'" value="'+name+'" /> <label for="cb'+id+'">'+name+'</label>';
container.append($(html));
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.