Use checkboxes to determine the value of a javascript variable

Question

How can I add javascript variables into a javascript array based on what html check boxes are checked off? I would like to check boxes off and have each checked box add choice# into var final_list.

How should I id my checklists and what should I change my var final_list=[ ] to?

Here is the html for my check boxes (There are 12 in total):

<input type="checkbox" id="c1" name="c1" />

Here is the javascript:

function myFunction(){

var list1  = [          ];
var list2  = [          ];  
var list3  = [          ];  
var list4  = [          ];  
var list5  = [          ];  
var list6  = [          ];  
var list7  = [          ];  
var list8  = [          ];  
var list9  = [          ];  
var list10 = [          ];  
var list11 = [          ];  
var list12 = [          ];  

var choice1  = list1[Math.floor(Math.random()*list1.length)];
var choice2  = list2[Math.floor(Math.random()*list2.length)];
var choice3  = list3[Math.floor(Math.random()*list3.length)];
var choice4  = list4[Math.floor(Math.random()*list4.length)];
var choice5  = list5[Math.floor(Math.random()*list5.length)];
var choice6  = list6[Math.floor(Math.random()*list6.length)];
var choice7  = list7[Math.floor(Math.random()*list7.length)];
var choice8  = list8[Math.floor(Math.random()*list8.length)];
var choice9  = list9[Math.floor(Math.random()*list9.length)];
var choice10 = list10[Math.floor(Math.random()*list10.length)];
var choice11 = list11[Math.floor(Math.random()*list11.length)];
var choice12 = list12[Math.floor(Math.random()*list12.length)];

var final_list   = [         ];
var finalchoice = final_list[Math.floor(Math.random()*final_list.length)];

}

Abraham Hamidi · Accepted Answer · 2014-01-29 02:46:39Z

I'm going to tell you straight out right now that your JavaScript makes no sense, as it doesn't contribute to what you want to do, so I'm going to tell you how to do this. From scratch!

Use a class, like

<input type="checkbox" class="c" />

and in your Javascript, you would have something like

var final_list = []
var checkboxes = document.getElementsByClassName('c');
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].onchange = function () {
        final_list = [];
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                final_list.push(i);
                alert(final_list);
            }
        }
    };
}

and every time a checkbox is checked, the number will be added to the array. If all your inputs are checkboxes, you could also do this:

var final_list = []
var checkboxes = document.getElementsByTagName('c');
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].onchange = function () {
        final_list = [];
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                final_list.push(i);
                alert(final_list);
            }
        }
    };
}

and the only change is getElementsByClassName is replaced with getElementsByTagName. ID's are unique, please don't use them for that case.

DEMO

C'mon it makes a little sense lol. I want to have 12 lists that the script picks something random from the arrays (list1-list12) I just left them empty for the moment. But I want to have the check boxes add the choices to the final_list array. So if the person checks off, for example, box 1 and box 7 the array will be var final_list=[choice1, choice7]
@adigioia If you do that with this script, it'll make final_list [1, 7]
thank you I'm still having one little problem var finalchoice is literally coming out as 'choice1' rather than the variable for choice1 any suggestions
@adigioia Is choice1 an array? If so, try replacing choice1 with choice1[0] to get the first item of choice1

Collectives™ on Stack Overflow

Use checkboxes to determine the value of a javascript variable

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related