Как активно обновлять HTML на статусе флажка?

Question

Скажет, у меня есть <input type="checkbox" id="box1" /> и < div id="createhere"></div> и в файл JavaScript У меня есть:

function(){ 
    var box=document.getElementById("box").checked; 
    var s = ""; 
    if(box){ 
     s = "<input type="text" name="text" id="text" />" 
     document.getElementById("createhere").innerHTML = s; 
    }else{ 
     s = ""; 
     document.getElementById("createhere").innerHTML = s; 
    } 
} 

Теперь это работает, но это только создает текстовое поле, когда я обновить браузер (Firefox).

Как я могу сделать то же самое без обновления браузера?

Answer 1

Этот код работает с jQuery. Я использовал jQuery, потому что у вопроса есть тег jQuery!

Вы можете попробовать это.

$("#box").on('change', function(){ 

    var check = $(this).prop("checked"); 
    var inputHTML = ""; 

    if (check) 
     inputHTML = "<input type='text' name='text' id='text' />"; 

    $("#createhere").html(inputHTML); 

}).trigger("change"); 

Answer 2

Используйте обработчик событий изменения

function update() { 
 
    var box = document.getElementById("box").checked; 
 
    var s = ""; 
 
    if (box) { 
 
    s = '<input type="text" name="text" id="text" />'; 
 
    } else { 
 
    s = ""; 
 
    } 
 
    document.getElementById("createhere").innerHTML = s; 
 
}

<input type="checkbox" id="box" onchange="update()" /> 
 
<div id="createhere"></div>

---

С JQuery

jQuery(function($) { 
 
    $('#box').change(function() { 
 
    $('#createhere').html(this.checked ? '<input type="text" name="text" id="text" />' : ''); 
 
    }).change() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" id="box" /> 
 
<div id="createhere"></div>