add dynamic click on checkbox and to get inputName in jQuery

Question

I have a dynamic input which will have checkbox to hide the inputs when you tick the checkbox, at the moment I'm trying to add click="getChk() to the checkbox however it was only giving me the last index inputName.

Say I have input Ids (code, sku, id).

My dynamic inputs and checks code line is

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);
}

But this will need to be saved in the localStorage so when refresh it will persist the input to be hidden when its exists in the localStorage.

Edit: the code below should save the name in the localStorage in array form.

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))
}

My attempt is by adding .click(function(){})

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

HTML inputs and checkbox html

Rory McCrossan · Accepted Answer · 2016-12-30 15:14:22Z

3

The issue is because when the click event handler runs the for loop has completed, therefore the id variable holds the last value.

To fix this, amend your click handler to read the id attribute directly from the element which raised the event:

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

Also, as spotted by @guest271314, the correct method when setting localStorage data is setItem(), not set():

localStorage.setItem('checked', id);

answered Dec 30, 2016 at 15:14

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MrNew Over a year ago

Yeah sorry I meant to say .setItem, oh right will try adding this

MrNew Over a year ago

but how can I correspond the checkbox to the textarea, just reliased that this.id will only give me the id of the checkbox not the textarea

Rory McCrossan Over a year ago

You could store a data attribute on all the grouped elements and select by that, or use DOM traversal depending on how they appear in the page.

MrNew Over a year ago

is it possible to show how? I've added a screenshot of the html structure of the inputs/checks

Sanjay Nishad · Accepted Answer · 2016-12-30 15:17:43Z

0

you can try below code

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

.click(getChk);

answered Dec 30, 2016 at 15:17

Sanjay Nishad

1,62515 silver badges29 bronze badges

Collectives™ on Stack Overflow

add dynamic click on checkbox and to get inputName in jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related