Флажок на проверенной марке <div>превращается в <input>формы

Question

Возможна ли эта практика? Например, когда установлен флажок, измените связанный контент в форму ввода, чтобы я мог редактировать информацию.

Answer 1

Да, конечно, это возможно. Не уверен насчет вашего варианта использования, но вы можете достичь, вот как.

var input = document.createElement("input");
input.setAttribute('type', 'checkbox');
var parent = document.getElementById("parentDiv");
parent.appendChild(input);
input.addEventListener("change", function(){
  input.setAttribute('type', 'text');
  input.focus();
});

input.addEventListener("focusout", function(){
  if(input.getAttribute('type') == "text"){
    input.setAttribute('data-text', input.value)
   document.getElementById("parentDiv").innerHTML =      input.getAttribute('data-text');
   input.setAttribute('type', 'checkbox');
   parent.appendChild(input);
  }
})

#parentDiv{
height:150px;
width:300px;
border:1px solid green;
}

<div id="parentDiv">
 <span id="placeholder">Text will be here</span>
</div>

Answer 2

Вы не можете изменить тип элемента с помощью чистого JavaScript. Но вы можете скрыть и показать некоторые входные данные, например. Вот как вы можете зарегистрировать событие:

var checkbox = document.getElementById('checkbox')

checkbox.addEventListener('change', (event) => {
  if (checkbox.checked) {
    //enable your input
  } else {
    //disable your input
  }
})