动态复选框隐藏动态输入框

Question

我从array对象呈现动态输入和复选框，但是我不太确定如何隐藏input当我点击相对于输入的checkbox。

function dynamicStuff() { 
    var objs = ['Id', 'Name', 'Age']; 

     for (var i = 0; i < objs.length; i++) { 
     objs[i]; 
     var cElement = document.createElement("input"); 
     cElement.type = "checkbox"; 
     cElement.name = objs[i]; 
     cElement.id = objs[i]; 

     var cElementInput = document.createElement("input"); 
     cElementInput.type = "text"; 
     cElementInput.name = objs[i]; 
     cElementInput.id = objs[i]; 
     cElementInput.placeholder = objs[i] 
     document.getElementById('chkBox').appendChild(cElement); 
     document.getElementById('chkBox').appendChild(cElementInput); 
     } 

    } 

Live example。

节省localStroage：

function chkboxCookie() { 
    var indexOfItem = checkAllFields.indexOf(this.id); 
    if (indexOfItem >= 0) { 
     checkAllFields.splice(indexOfItem, 1); 
    } else { 
     checkAllFields.push(this.id); 
    } 

    /* it saves paramater name in the localStorage*/ 
    localStorage.setItem("checkedUsers", JSON.stringify(checkAllFields)); 
} 

如何隐藏，我打勾input，并可能保存input名/ ID在localStorage的？

Answer 1

Working fiddle。

的id属性应该是在同一个页面唯一的，这样试图改变例如输入ID：

cElementInput.id = objs[i]+'_input'; 

而改变事件附加到复选框的在那里你会显示/隐藏相关的输入：

cElement.addEventListener("change", toggleInput, false); 

然后定义您的toggleInput()功能：

function toggleInput(){ 
    var input_id = this.id+'_input'; 

    document.getElementById(input_id).style.display = this.checked ? 'inline' : 'none';  

    localStorage.setItem(this.id, this.value); 
} 

要check/uncheck的checkboxe的基础上localStorage，首先获得数据：

var localStorageData = JSON.parse(localStorage.getItem("checkedUsers")); 
var data = localStorageData==null?[]:localStorageData; 

然后，检查数组中显示的数值和check/uncheck checkboxe的：

if(data.indexOf(objs[i]) >= 0) 
    cElement.checked = true; 
else 
    cElement.checked = false; 

希望这有助于。

Answer 2

你会添加一个事件处理程序做一些事情来输入时复选框被选中

function dynamicStuff() { 
 
    var objs = ['Id', 'Name', 'Age']; 
 

 
    for (var j = 0; j < objs.length; j++) { 
 
    \t (function(i) { 
 
      objs[i]; 
 

 
      var cElementInput = document.createElement("input"); 
 
      cElementInput.type = "text"; 
 
      cElementInput.name = objs[i]; 
 
      cElementInput.id = objs[i]; 
 
      cElementInput.placeholder = objs[i]; 
 

 
      var cElement = document.createElement("input"); 
 
      cElement.type = "checkbox"; 
 
      cElement.name = objs[i]; 
 
      cElement.id = objs[i]; 
 
      cElement.addEventListener('change', function() { 
 
      \t cElementInput.style.display = this.checked ? 'none' : 'inline'; 
 
       localStorage.setItem(objs[i], this.value); 
 
      }); 
 
      
 
      var br = document.createElement('br'); 
 

 
      document.getElementById('chkBox').appendChild(cElement); 
 
      document.getElementById('chkBox').appendChild(cElementInput); 
 
      document.getElementById('chkBox').appendChild(br); 
 
      document.getElementById('chkBox').appendChild(br.cloneNode()); 
 
     })(j); 
 
    } 
 

 
} 
 

 
dynamicStuff()

<div id="chkBox"></div>