javascript - 隐藏动态输入框的动态复选框

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

您将添加一个事件处理程序，在选中复选框时对输入执行某些操作

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

    for (var j = 0; j < objs.length; j++) {
    	(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() {
            	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>