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, Sep 11 '18 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, Sep 11 '18 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, Sep 11 '18 at 15:57

score 2 · Accepted Answer · answered Sep 11 '18 at 16:35

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 '18 at 16:35

Shubham Baranwal

2,492
3
14
26

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? – hnewbie Sep 11 '18 at 17:10
It just used to select `tags` with their index value you can read it more from here [.eq()](https://api.jquery.com/eq/). – Shubham Baranwal Sep 11 '18 at 17:14
Thank you for accepting my answer as well for upvote it. :) – Shubham Baranwal Sep 11 '18 at 17:16

Christopher M Miller · Answer 2 · 2018-09-11T16:23:50.287

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 '18 at 16:23

answered Sep 11 '18 at 15:46

Christopher M Miller

132
7

Thanks for the response, but neither strangely works. I'll keep digging. – hnewbie Sep 11 '18 at 16:05
@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 – Christopher M Miller Sep 11 '18 at 16:15
1

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. – Heretic Monkey Sep 12 '18 at 17:39

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

2 Answers2