如何使用JavaScript動態添加復選框？
[英]How to add checkboxes dynamically using javascript?
問題描述
我使用Bootstrap並具有一個帶有2個文本字段和2個復選框的表單。 使用添加按鈕，我想添加（每次單擊）帶有復選框的其他文本字段。 目前，我正在使用此JS：
$("#addButton").click(function () {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
/* TODO: patterns festlegen */
newTextBoxDiv.after().html('<div class="form-group label-floating">' +
'<label class="control-label">Answer' + counter + '</label>' +
'<input type="text" class="form-control"/>' +
'</div><div class="togglebutton"><label><input type="checkbox" checked="">Toggle is on</input></label></div>');
newTextBoxDiv.appendTo("#AnswerGroup");
counter++;
});
它成功添加了文本字段，但未顯示該復選框，僅顯示了文本“ Toggle on”。
我該如何解決？ 我將JS插入$(document).ready(function () { 。
編輯我認為CSS會引起問題。 當我簡單地添加'</div><input type="checkbox" checked=""/></div>' ，它僅顯示不帶UI的復選框。 添加其余部分（如class =“ togglebutton”）后，我什么也看不到。
5 個解決方案
解決方案1
1 2016-07-04 14:28:49
您的復選框的標記不正確：
<label><input type="checkbox" checked="">Toggle is on</input></label>
應該
<label><input type="checkbox" checked="" />Toggle is on</label>
解決方案2
0 2016-07-04 14:13:25
可能是因為輸入標簽沒有閉合對。
嘗試
'<input type="checkbox" checked="">'
並且必須具有“名稱”屬性
解決方案3
0 2016-07-04 14:29:51
測試答案
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
$("#addButton").click(function () {
var counter = 2; //for sample
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
/* TODO: patterns festlegen */
newTextBoxDiv.after().html('<div class="form-group label-floating">' +
'<label class="control-label">Answer' + counter + '</label>' +
'<input type="text" class="form-control"/>' +
'</div><div class="togglebutton"><label><input type="checkbox" checked="">Toggle is on</input></label></div>');
newTextBoxDiv.appendTo("#AnswerGroup");
counter++;
});
});
</script>
</head>
<body>
<input type="button" id="addButton" value="hello"/>
<div id="AnswerGroup"> </div>
</body>
</html>
解決方案4
0 2016-07-04 14:39:24
首先，代替$("#addButton").click(function () {養成$("#addButton").on('click', function () {的習慣，您將有更多控制權將來的事件監聽器。
接下來， var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter); 應該是var newTextBoxDiv = $('<div/>').prop('id', 'TextBoxDiv' + counter); 。
接下來，您似乎正在創建內容newTextBoxDiv ，然后在其后插入內容。 我不確定您是否要這樣做。 我認為您希望將內容添加到剛創建的框中。 此外，根據.after() ，它接受html作為參數。 我相信您以后再調用.html()只是設置newTextBoxDiv的內部HTML。
如您的具體問題； 您應該能夠使用以下語法創建一個復選框： var checkbox = $('<input/>').attr('type', 'checkbox');
要將其設置為選中（或未選中），請使用.prop()如下所示： checkbox.prop('checked', true); //checks the box. checkbox.prop('checked', true); //checks the box.
要將其設置為HTML字符串（並進行檢查 ），我相信您應該使用以下語法： <input type="checkbox" checked>
解決方案5
0 2016-07-06 13:58:51
嘗試使用：
newTextBoxDiv.append(...)
代替
newTextBoxDiv.after().html(...)
使用Javascript將復選框動態添加到Symfony 2 Form
[英]Add checkboxes dynamically to a Symfony 2 Form with Javascript
使用 Javascript 向 ASP.NET web 頁面動態添加復選框，標簽顯示不正確
[英]Dynamically add checkboxes to ASP.NET web page using Javascript, tags are appearing incorrect
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.