Как добавить флажки динамически с помощью javascript?

Я использую Bootstrap и имею форму с 2 текстовыми полями и 2 флажками. С помощью add-Button я хочу добавить (за клик) дополнительное текстовое поле с флажком. В настоящее время я использую этот JS:Как добавить флажки динамически с помощью javascript?

$("#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++; 
});

Он успешно добавляет текстовое поле, но флажок не отображается, только текст «Переключение на».

Как я могу это решить? Я вставил JS внутри $(document).ready(function() {.

EDIT Я думаю, что CSS вызывает проблему. Когда я просто добавляю '</div><input type="checkbox" checked=""/></div>', он показывает только флажок без интерфейса. После добавления остальных (например, класс = «ToggleButton», я ничего не вижу.

источник

2016-07-04 Studentus

Я не знаю, если это проблема, но флажок ввода типа не имеет значения.Удалите и закройте его. –

Опубликовать свой html слишком – Poonam

Поскольку только JS-код работает: https://jsfiddle.net/9ra8vyw5/, я думаю, что CSS вызывает проблему, может быть, это не так установите флажок внутри этикетки. – progysm

Может быть потому, что входной тег не имеет пары закрытия.

Попробуйте

'<input type="checkbox" checked="">'

И он должен иметь «имя» атрибут

источник

2016-07-04 14:13:25 venoel

Это не имеет значения – Studentus

разметка для флажка не является правильным:

<label><input type="checkbox" checked="">Toggle is on</input></label>

должен быть

<label><input type="checkbox" checked="" />Toggle is on</label>

источник

2016-07-04 14:28:49 MISJHA

К сожалению, это не имело никакого значения. Если я помещаю код непосредственно в мой статический HTML, он работает. Просто, когда я пытаюсь добавить его динамически с помощью JS, он не отображается. – Studentus

Испытано ответ

<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>

источник

2016-07-04 14:29:51

Что такое использование $ (document.createElement ('div')) – brk

В этом случае он создаст оболочку div с идентификатором TextBoxDiv2 –

Если я добавлю метку с флажком static to html, она будет работать. Просто, когда я пытаюсь добавить его динамически с помощью JS, флажки не видны (просто метка). – Studentus

Во-первых, вместо того, чтобы $("#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() после этого просто устанавливает внутренний HTML newTextBoxDiv в любом случае.

Как ваш вопрос конкретно; Вы должны быть в состоянии создать флажок со следующим синтаксисом: var checkbox = $('<input/>').attr('type', 'checkbox');

Чтобы установить его проверили (или незарегистрированный) вы используете .prop() так: checkbox.prop('checked', true); //checks the box.

Чтобы установить его в качестве HTML-строки (и have it checked) Я считаю, что вы должны использовать следующий синтаксис: использование <input type="checkbox" checked>

источник

2016-07-04 14:39:24

Try:

newTextBoxDiv.append(...)

вместо

newTextBoxDiv.after().html(...)

источник

2016-07-06 13:58:51

Как добавить флажки динамически с помощью javascript?

ответ

Смежные вопросы