Select All Checkboxes By ID/Class

Question

I'm really bad at Javascript and I'm struggling to get my head round it.

What I'm trying to do is get something to select all checkboxes. However everything I have found tries to do it by name, I want to do it by ID or class. Select all by name is just inpractical isn't it?

score 19 · Accepted Answer · edited Jan 10 '18 at 16:45

19

Using JQuery, you can do this very easilly!

$(".ClassName").attr("checked", "true");

or a single ID

$("#ID").attr("checked", "true");

See: Check All Checkboxes with JQuery.

edited Jan 10 '18 at 16:45

kenorb

155,785
88
678
743

answered Jun 23 '09 at 14:21

Andrea

2,059
2
14
15

score 17 · Answer 2 · answered Jun 23 '09 at 14:20

var array = document.getElementsByTagName("input");


for(var ii = 0; ii < array.length; ii++)
{

   if(array[ii].type == "checkbox")
   {
      if(array[ii].className == YOUR_CLASS_NAME)
       {
        array[ii].checked = true;

       }


   }
}

by ID:

var checkbox = document.getElementById(YOUR_ID);

if(null != checkbox)
    checkbox.checked = true;

kenorb · Answer 3 · 2018-01-10T16:55:59.790

Javascript

By class:

var clist=document.getElementsByClassName("MyClass");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = "checked"; }

By ID:

var clist=document.getElementById("MyID");
for (var i = 0; i < clist.length; ++i) { clist[i].checked = "checked"; }

See also: Loop Over querySelectorAll Matches.

jQuery

By class:

$('.myclass:input:checkbox').each(function() { this.checked = true; });

By ID:

$('#myID:input:checkbox').each(function() { this.checked = true; });

Related: How to reset all checkboxes using jQuery or pure JS?

score 2 · Answer 4 · answered Jun 23 '09 at 14:21

2

JQuery is great when there's a pattern to match. See Check All Checkboxes with JQuery.

answered Jun 23 '09 at 14:21

Galwegian

41,475
16
112
158

Thanks Galwegian - that's the answer that will get me on a couch with a beer before 9pm. You can't beat a working example, IMHO. – Geoff Kendall May 31 '13 at 14:12

score 0 · Answer 5 · answered Jun 23 '09 at 14:18

0

I always had a tough time with javascript. You might want to investigate the jQuery javascript library. It's greatly enhanced my ability to solve problems using javascript, as well as create more clear and concise code to manipulate and access the DOM.

With jQuery you should be able to easily select all the checkboxes you'd like by ID and then loop through them setting their value to be checked.

answered Jun 23 '09 at 14:18

Brian

2,253
2
23
39

I wanted to avoid it as not everyone wants to include jQuery, but oh well. It's about time everyone used it. Its all working now :) – Ben Shelock Jun 23 '09 at 14:33
There's no reason to use jQuery for such a tiny task. – James Jun 23 '09 at 14:34
2

If Ben's having general troubles with JavaScript though, it may be a good idea for him to check it out. – Brian Jun 23 '09 at 14:44

score 0 · Answer 6 · edited Jan 10 '18 at 20:19

0

What if you give all of the checkboxes the same name + a number(ie. chkbox1, chkbox2,etc...). Then in your javascript you would create a for loop to go through the number of checkboxes you have, and do getElementByID("chkbox" + num) (where num is your loop variable).

edited Jan 10 '18 at 20:19

Scott Weaver

7,192
2
31
43

answered Jun 23 '09 at 14:22

score 0 · Answer 7 · answered Jun 23 '09 at 14:23

Pseudo code:

function checkAll(array_with_id_values)
{
    for (var i = 0, ilen = array_with_id_values.length; i < ilen; i++)
    {
        document.getElementById(array_with_id_values[i]).checked = true;
    }
}

Call it with:

checkAll(['my-unique-id', 'my-other-unique-id', 'my-third-unique-id']);

You should ofc not use such verbose variable names and do checks that the argument is an array and that the element you get is a checkbox etc etc.

score 0 · Answer 8 · answered Aug 22 '18 at 00:15

0

Try this using jQuery:

$(".className").prop("checked", true);
$("#idName").prop("checked", true);

answered Aug 22 '18 at 00:15

Jaime Montoya

6,915
14
67
103

Select All Checkboxes By ID/Class

8 Answers8

Javascript

jQuery

Linked