動態複選框隱藏動態輸入框

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>