Set an array of the checkbox values with another array of values

Question

I have a set of input checkboxes on a form that look like this:

<input type="checkbox" value=""><span value="Atlanta">Atlanta</span>
<input type="checkbox" value=""><span value="Charleston">Charleston</span>
<input type="checkbox" value=""><span value="Chicago">Chicago</span> and etc.

The above is due to running this, $dataTable.ajax.reload(), and for some reason this erases the values of the checkboxes in my form. These checkboxes are not hardcoded and are being dynamically generating.

Instead of doing the below, I realize I can just refresh the page and get all the value back, but I'd like to see if there is another way to do what I'm trying to do below.

Anywho, I took the span text of each checkbox, turned that into an array and called it spanarr. I also turned the input checkboxes into an array, called emergcheck.

var emergspanarr = $('#emergencyForm span').toArray();
var spanarr = [];
var emergcheck = $('#emergencyForm input[type="checkbox"]');

emergspanarr.map(function(item){
    spanarr.push(item.innerHTML.trim());
});

I'm trying to insert one span value (from spanarr) into each of input checkbox (from emergcheck).

What I have so far:

for (var j = 0; j < emergcheck.length; j++){
    for (var k = 0; k < spanarr.length; k++){
        emergcheck.attr("value", function(i, val){
            return val + spanarr[k];
        })          
    }                   
}

But it's producing this:

<input value="AtlantaCharlestonChicagoHouston (Sales)Houston (Terminal)Long BeachMarseillesMiamiMontreal....Santa Ana SavannahSeattleSecaucusTorontoVancouverAtlantaCharlestonChicagoHouston (Sales)Houston (Terminal)Long BeachMarseillesMiamiMontrealSanta Ana .....Santa AnaSavannahSeattleSecaucusTorontoVancouver" type="checkbox"><span value="Atlanta">Atlanta</span>

<input value="AtlantaCharlestonChicagoHouston (Sales)Houston (Terminal)Long BeachMarseillesMiamiMontreal....Santa Ana SavannahSeattleSecaucusTorontoVancouverAtlantaCharlestonChicagoHouston (Sales)Houston (Terminal)Long BeachMarseillesMiamiMontrealSanta Ana .....Santa AnaSavannahSeattleSecaucusTorontoVancouver" type="checkbox"><span value="Charleston">Charleston</span> and etc.

I want it to be this instead:

<input type="checkbox" value="Atlanta"><span value="Atlanta">Atlanta</span>
<input type="checkbox" value="Charleston"><span value="Charleston">Charleston</span>
<input type="checkbox" value="Chicago"><span value="Chicago">Chicago</span

I feel like I am close. What am I missing? In need of another pair of eyes. Thanks,

Please include code as code, not as an image. You should be able to copy and paste from the Elements panel (or right-click and select Copy > Copy outerHTML). — Heretic Monkey
– Heretic Monkey, Commented Sep 11, 2018 at 15:32
FYI, map returns an array; there's no need to push. var spanarr = emergspanarr.map(function (item) { return item.innerHTML.trim(); }). — Heretic Monkey
– Heretic Monkey, Commented Sep 11, 2018 at 15:34
@HereticMonkey after copying the outerHTML, I realized the loop was worse than I originally thought (lol, outputs the array 17 times within value ) so I shortened the output for post. Duly noted on the push, I'll change that in my code. Thanks! — hnewbie
– hnewbie, Commented Sep 11, 2018 at 15:57

Shubham Baranwal · Accepted Answer · 2018-09-11 16:35:52Z

2

Just try to change code with below code -

JS Code -

for (var j = 0; j < emergcheck.length; j++){
    emergcheck.eq(j).val(spanarr[j]);                
}

Maybe it can help you.

answered Sep 11, 2018 at 16:35

Shubham Baranwal

2,4983 gold badges16 silver badges26 bronze badges

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

3 Comments

hnewbie Over a year ago

Could you explain what is happening here? It worked! I've never seen eq() used before. Looked it up @ the jquery site. Was it because my indexes for both arrays needed to be filtered?

Shubham Baranwal Over a year ago

It just used to select tags with their index value you can read it more from here .eq().

Shubham Baranwal Over a year ago

Thank you for accepting my answer as well for upvote it. :)

Christopher M Miller · Accepted Answer · 2018-09-11 16:23:50Z

1

I think you just want the value of the input. You can use .val() from jQuery or just .value as pure js.

jQuery way:

var emergspanarr = $('#emergencyForm span').toArray();
var emergcheck = $('#emergencyForm input[type="checkbox"]').toArray();

for (var j = 0; j < emergcheck.length; j++) {
    emergcheck[j].val(emergspanarr[j].val());
}

Pure js way:

var emergspanarr = $('#emergencyForm span').toArray();
var emergcheck = $('#emergencyForm input[type="checkbox"]').toArray();

for (var j = 0; j < emergcheck.length; j++){
    emergcheck[j].value = emergspanarr[j].value;
}

edited Sep 11, 2018 at 16:23

answered Sep 11, 2018 at 15:46

Christopher M Miller

1327 bronze badges

3 Comments

hnewbie Over a year ago

Thanks for the response, but neither strangely works. I'll keep digging.

Christopher M Miller Over a year ago

@hnewbie I didn't realize your spanarr held innerHTML. This would only work with an array of elements. My bad. I'll edit my answer to use emergspanarr instead. That should work

Heretic Monkey Over a year ago

The "Pure js way" uses jQuery too (for selecting the elements). If you want pure JS for that, use var emergspanarr = Array.from(document.querySelectorAll('#emergencyForm span')); and similar code for the other one.

Collectives™ on Stack Overflow

Set an array of the checkbox values with another array of values

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related