[英]How to add a checked checkbox element into Div dynamically?
我想创建一个JavaScript function
,在按下button
,获取checkbox
元素列表及其内容, 检查所有 checkboxes
,创建带有这些checkboxes
的div
元素,并将结果写入HTML
表单。
这是我的代码:
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;
}
这是带有复选框元素列表的HTML Div元素。 它们也是动态出现的。 最初,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>
这是HTML表单,我希望我的结果出现在:
<form id="formInput">
</form>
这里的问题是它检查了我的列表中的所有checkboxes
,但在生成的HTML
表单中,它们再次出现未选中状态。 这有什么问题 ? 谢谢
除了将prop()替换为attr(),正如Rik Lewis正确推荐的那样,您可以交替使用该线
$(“formInput”)。find('。chk')。prop(“checked”,true);
在函数的底部,并在选择器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.