Javascript check all button for items that are in a loop

Question

I am having trouble making a button that will check all the boxes (and possibly another button that unchecks them all.

So what i need is: A function that will check all the boxes and a line of code to put into html to call that function.

My items are NOT in a form.

This is the code inside my .js file (array)

var computer = new Array();
{
computer[0] = "10001, Nvidia Geforce GTX 690, $1200"

computer[1] = "10002, Raedon HD 7950, $450"   

computer[2] = "20001, Ivy Bridge i7 3770, $400"

computer[3] = "20002, Ivy Bridge i7 3770k, $420"

computer[4] = "20003, Sandy Bridge i7 2700k, $340"

computer[5] = "20004, Bulldozer FX-8150, $270"

computer[6] = "30001, Antec eleven-hundred, $120"

computer[7] = "30002, Coolermaster HAF-X, $170"

computer[8] = "30003, Antec three-hundred, $50"

computer[9] = "30004, Corsair 550D, $160"

computer[10] = "40001, INTEL-ASrock fatal1ty Z77 Professional Motherboard, $250"

computer[11] = "40002, INTEL-ASrock Z77 extreme9 Motherboard, $350"

computer[12] = "40003, AMD-ASrock fatal1ty 990FX Professional Motherboard, $240"

computer[13] = "40004, AMD-ASUS Sabertooth 990FX Motherboard, $260"

}

This is the code inside my HTML.

<script type="text/javascript">

for(x=0; x<=computer.length-1; x++) {

  document.write("<tr id='"+x+"'><td><label><input type='checkbox' id='labeltest' name='item' value='"+x+"'/> "+computer[x].split(",")[0]+"</label></td><td>"+computer[x].split(",")[1]+"</td><td> <input name='qty' id='qty' type='textbox' value='0' onchange='qtychange(document.myform.qty);'/> </td><td>"+computer[x].split(",")[2]+"</td></tr>");

}

Thanks in advance :)

Use the jQuery javascript. It is explained here http://stackoverflow.com/questions/11380555/checkbox-check-all-option — Rams Kannan, Jul 11 '12 at 06:20
no errors, it works as is when linked from HTML to the .js file — Hygeia, Jul 11 '12 at 06:23

micnic · Accepted Answer · 2012-07-11T07:12:26.953

1

Your checkboxes must have only the same "name" attribute, not "id" too, then use this function:

function check() {

    var checkboxes = document.getElementsByName('item');

    for (var i = 0, length = checkboxes.length; i < length; i++) {
        checkboxes[i].checked = true;
    }
}

HTML:

<button onclick="check()">Check them all!</button>

edited Jul 11 '12 at 07:12

answered Jul 11 '12 at 06:25

micnic

10,915
5
44
55

When i put the javascript into my .js file the array doesn't even work anymore... =/ – Hygeia Jul 11 '12 at 06:42
i don't get what you mean by "Your checkboxes must have only the same "name" attribute, not "id" too" – Hygeia Jul 11 '12 at 06:49
you wrote "... id='labeltest' name='item' ..." inside your html, the id attribute must be unique, do not define the same id for all checkboxes, only the name must be the same – micnic Jul 11 '12 at 06:54
so just get rid of the id="labeltest'? i'm not sure what to do with it. – Hygeia Jul 11 '12 at 07:09
weird... when i added the new function into the .js file the array doesn't work anymore =/ – Hygeia Jul 11 '12 at 07:15

Javascript check all button for items that are in a loop

1 Answers1