添加动态单击复选框并在jQuery中获取inputName

Question

我有一个动态input，当{I}尝试添加checkbox时，checkbox会隐藏输入click="getChk()到了checkbox然而它只给了我最后一个index inputName。

说我输入了ID（代码，sku，id）。

我的动态输入和检查代码行是

for (var x = 0; x < searchParams.length; x++) {
     var container = $('#checkBox');
     var inputs = container.find('input');
     var id = inputs.length + 1;
     var inputName = searchParams[x].name;
     $('<textarea />', { id: inputName, name: inputName, placeholder: inputName, rows: "2", class: "search-area-txt col-sm-12" }).appendTo(searchbox);
     $('<input />', { type: 'checkbox', id: 'x' + id, name: inputName }).appendTo(checkBox);
     $('<label />', { 'for': 'x' + id, text: inputName, id: inputName, name: inputName }).appendTo(checkBox);
}

但是这需要保存在localStorage中，因此当刷新时，如果输入存在于localStorage中，它将保持隐藏状态。

编辑 ：以下代码应以localStorage格式保存名称。

var inputNames = [];
getChk(id){
 var indexOfItem = inputNames.indexOf(name)
 if (indexOfItem >= 0) {
    inputNames.splice(indexOfItem, 1);
 } else {
    inputNames.push(name);
 }
 localStorage.setItem('chked', JSON.stringify(inputNames))
}

我的尝试是添加.click(function(){})

$('<input />', { type: 'checkbox', id: 'x' + id, name: inputName }).appendTo(checkBox).click(function(){
 getChk(id); // only gives me the id name
});

HTML输入和复选框html

Answer 1

问题是因为当click事件处理程序运行时for循环已完成，因此id变量保存最后一个值。

要解决此问题，请修改您的点击处理程序，直接从引发事件的元素中读取id属性：

$('<input />', { type: 'checkbox', id: 'x' + id, name: inputName }).appendTo(checkBox).click(function() {
   getChk(this.id);
});

此外，正如@ guest271314发现的那样，设置localStorage数据的正确方法是setItem()，而不是set()：

localStorage.setItem('checked', id);

Answer 2

你可以尝试下面的代码

getChk(e){
 localStorage.set('checked', this.id);
 console.log('input id>> ', this.id);
}

.click(getChk);