How to implement "select all" check box in HTML?

Question

I have an HTML page with multiple checkboxes.

I need one more checkbox by the name "select all". When I select this checkbox all checkboxes in the HTML page must be selected. How can I do this?

If you want to degrade gracefully, selecting the "select all" should actually mean that all are selected regardless of their individual state. (visiting your page with javascript disabled) — some, Dec 22 '08 at 17:09
In Firefox (and maybe others?) : Hit `CTRL+SHIFT+K` to open the console, then **paste** : `$("input:checkbox").attr('checked', true)` and hit `Enter`. All check-boxes on current page should now be checked. **To un-check** change `True` to `False`. — ashleedawg, Dec 11 '18 at 14:45

score 373 · Answer 1 · edited Jul 25 '17 at 10:28

373

<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var checkbox in checkboxes)
    checkbox.checked = source.checked;
}
</script>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

UPDATE:

The for each...in construct doesn't seem to work, at least in this case, in Safari 5 or Chrome 5. This code should work in all browsers:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

edited Jul 25 '17 at 10:28

Tony

9,672
3
47
75

answered Dec 22 '08 at 14:01

Can Berk Güder

109,922
25
130
137

1

for each(var checkbox in checkboxes) --------------------------------------- should: for(var checkbox in checkboxes) – HelloWorld Jun 16 '10 at 05:14
@HelloWorld: for each...in is actually valid Javascript: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Statements/for_each...in But, as porneL has pointed out, it's an obscure construct. Also, this code doesn't work in Safari 5 or Chrome 5. It works in FF 3.6, and IIRC, it worked in Safari 4. `for(var i in checkboxes) checkboxes[i].checked = source.checked` works in all browsers. – Can Berk Güder Jun 16 '10 at 11:18
If adopting this for jquery, remember that the source variable becomes an EventHandler class, for click events, so you need to specify the target object for the checked command to work. See my answer below. – khylo Jul 06 '11 at 11:37
@CanBerkGüder What if you wanted the check all boxes on one page? One check all to control one set of checkboxes and another check all to control another set. – Rob Sep 29 '11 at 16:06
4

Never use `for in` with a collection or array – mplungjan Apr 06 '13 at 06:59
I was having a problem using this code. For me I had to change the function name. – Will Jul 18 '13 at 09:13
for a complete answer, i am wondering how you would uncheck the "Toggle All" checkbox in the case where: (1) Toggle All is checked; (2) any of checkboxes where name="foo" is then unchecked? – scagnetti Sep 30 '15 at 20:11
1

Why do you do `, n=checkboxes.length;i – ADTC Apr 02 '16 at 04:39
All checkboxes have the same name? How can you tell them from one another after the form is posted? – Giorgio Barchiesi May 05 '16 at 15:25
@mplungjan is there any sound reasoning behind your recommendation or is that just preference? – Typel May 25 '16 at 18:55
@Typel for example: http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-a-bad-idea – mplungjan May 25 '16 at 18:57
@ADTC It is good practice to set a variable to the length of the array to stop the chance for an infinite loop. If somewhere in your loop you add another checkbox the loop would never end as the length is always increasing. – Craig Jul 02 '16 at 10:03
Always Declare Local Variables – zeros-and-ones Sep 12 '16 at 05:30
5

Alright, as my edit was rejected for some reason, I guess I'll comment here. The for-each construct is deprecated and **will not work!** You have to use its replacement: `for(let checkbox of checkboxes)`. – forresthopkinsa Feb 03 '17 at 19:07
I'd just like to point out that having multiple checkboxes with the same name is invalid html. It serves the purpose of demonstrating the functionality here, but this being a very popular question, it'd be wise (for the sake of inexperienced future readers) to use a different selector (e.g. to assign a class to all the checkboxes we wish to handle this way). – El_Vanja Dec 03 '20 at 09:05
`function toggle(source) {` `Array.from(document.getElementsByName(source.name))` `.filter(checkbox => checkbox !== source)` `.forEach(checkbox => checkbox.checked = source.checked);` `}` then put the name for the toggle checkbox the same as for other checkboxes, and then no need to hardcode the name inside the function. What about a function like this? – voleger Sep 28 '22 at 22:46

score 157 · Answer 2 · edited Oct 09 '21 at 01:28

157

Using jQuery:

// Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<input type="checkbox" name="checkbox-2" id="checkbox-2" />
<input type="checkbox" name="checkbox-3" id="checkbox-3" />

<!-- select all boxes -->
<input type="checkbox" name="select-all" id="select-all" />

edited Oct 09 '21 at 01:28

deepakchethan

5,240
1
23
33

answered Feb 03 '10 at 09:50

davydepauw

1,790
1
12
7

26

i'd add an else clause to handle the deselect use case, ;-) .. else { // Iterate each checkbox $(":checkbox").each(function() { this.checked = false; }); } – emeraldjava Jul 08 '10 at 14:47
4

If you want to leave out the if and else and still handle the deselect you can do it this way : var state = this.checked; $(':checkbox').each(function() { this.checked = state; }); – Assil Oct 14 '15 at 18:12
You may be able to simplify this to `$(':checkbox').prop('checked', true);` and `$(':checkbox').prop('checked', false);` – RedDragonWebDesign Jul 30 '20 at 05:13

score 97 · Answer 3 · answered Mar 12 '13 at 01:31

97

I'm not sure anyone hasn't answered in this way (using jQuery):

  $( '#container .toggle-button' ).click( function () {
    $( '#container input[type="checkbox"]' ).prop('checked', this.checked)
  })

It's clean, has no loops or if/else clauses and works as a charm.

answered Mar 12 '13 at 01:31

fiatjaf

11,479
5
56
72

Slightly amending this to: `$('#container').on('click', 'toggle-button', function () {...})` is more performant because jQuery only needs to listen for click events from within `#container` rather than the entire DOM. See more in the docs: https://api.jquery.com/on/ – stwr667 Oct 23 '21 at 12:11

score 71 · Answer 4 · answered Feb 05 '16 at 06:58

71

I'm surprised no one mentioned document.querySelectorAll(). Pure JavaScript solution, works in IE9+.

function toggle(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != source)
            checkboxes[i].checked = source.checked;
    }
}

<input type="checkbox" onclick="toggle(this);" />Check all?<br />

<input type="checkbox" />Bar 1<br />
<input type="checkbox" />Bar 2<br />
<input type="checkbox" />Bar 3<br />
<input type="checkbox" />Bar 4<br />

answered Feb 05 '16 at 06:58

Sumit

2,242
1
24
37

3

this worked in Chrome, but i had a lot of checkboxes for different reasons, so instead of targeting 'type="checkbox"', i targeted 'name="myobject"' and it also worked. – Rich701 Aug 23 '17 at 17:14
Maybe this should be changed to the new correct answer, if not some discussion would be helpful. :-) – Jesse Jan 25 '20 at 10:40
1

This answer was a lot easier to implement into existing pages than the other answers. good job. – T.S Jan 31 '20 at 08:52

score 66 · Answer 5 · edited Mar 29 '21 at 15:10

66

here's a different way less code

$(function () {
       $('#select-all').click(function (event) {
          
           var selected = this.checked;
           // Iterate each checkbox
           $(':checkbox').each(function () {    this.checked = selected; });

       });
    });

edited Mar 29 '21 at 15:10

Machavity

30,841
27
92
100

answered Sep 04 '12 at 16:47

Var

669
5
2

score 16 · Answer 6 · answered Sep 18 '12 at 14:48

Demo http://jsfiddle.net/H37cb/

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>

<script type="text/javascript">
$(document).ready(function(){

$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});

});
</script>




<div id="wrapper">
 <li style="margin-top: 20px">
  <input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
  <ul>
   <li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
     <li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
     <li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
     <li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
    </ul>
   </li>
  </ul>
  <ul>
   <li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
     <li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
     <li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
    </ul>
   </li>
  </ul>
 </li>
</div>

For me it's only working for a single cycle.It toggles only once then it does nothing. — mrudult, Nov 09 '13 at 07:39
Well, if I deselect any item from the list shouldn't be the Select All checkbox deselected too? — some_other_guy, Jun 29 '15 at 09:48

score 13 · Answer 7 · answered Nov 15 '13 at 10:15

When you call document.getElementsByName("name"), you will get a Object. Use .item(index) to traverse all items of a Object

HTML:

<input type="checkbox" onclick="for(c in document.getElementsByName('rfile')) document.getElementsByName('rfile').item(c).checked = this.checked">

<input type="checkbox" name="rfile" value="/cgi-bin/">
<input type="checkbox" name="rfile" value="/includes/">
<input type="checkbox" name="rfile" value="/misc/">
<input type="checkbox" name="rfile" value="/modules/">
<input type="checkbox" name="rfile" value="/profiles/">
<input type="checkbox" name="rfile" value="/scripts/">
<input type="checkbox" name="rfile" value="/sites/">
<input type="checkbox" name="rfile" value="/stats/">
<input type="checkbox" name="rfile" value="/themes/">

if I need an if condition inside the onclick, how can I add it? Thanks — Gonzalo, Mar 22 '22 at 13:57

score 10 · Answer 8 · answered Aug 01 '13 at 19:02

10

Slightly changed version which checks and unchecks respectfully

$('#select-all').click(function(event) {
        var $that = $(this);
        $(':checkbox').each(function() {
            this.checked = $that.is(':checked');
        });
    });

answered Aug 01 '13 at 19:02

p0rsche

503
7
20

Giorgio Barchiesi · Answer 9 · 2016-05-05T20:04:54.387

My simple solution allows to selectively select/deselect all checkboxes in a given portion of the form, while using different names for each checkbox, so that they can be easily recognized after the form is POSTed.

Javascript:

function setAllCheckboxes(divId, sourceCheckbox) {
    divElement = document.getElementById(divId);
    inputElements = divElement.getElementsByTagName('input');
    for (i = 0; i < inputElements.length; i++) {
        if (inputElements[i].type != 'checkbox')
            continue;
        inputElements[i].checked = sourceCheckbox.checked;
    }
}

HTML example:

<p><input onClick="setAllCheckboxes('actors', this);" type="checkbox" />All of them</p>
<div id="actors">
    <p><input type="checkbox" name="kevin" />Spacey, Kevin</p>
    <p><input type="checkbox" name="colin" />Firth, Colin</p>
    <p><input type="checkbox" name="scarlett" />Johansson, Scarlett</p>
</div>

I hope you like it!

score 9 · Answer 10 · answered Dec 21 '12 at 10:36

<html>

<head>
<script type="text/javascript">

    function do_this(){

        var checkboxes = document.getElementsByName('approve[]');
        var button = document.getElementById('toggle');

        if(button.value == 'select'){
            for (var i in checkboxes){
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        }else{
            for (var i in checkboxes){
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
</script>
</head>

<body>
<input type="checkbox" name="approve[]" value="1" />
<input type="checkbox" name="approve[]" value="2" />
<input type="checkbox" name="approve[]" value="3" />

<input type="button" id="toggle" value="select" onClick="do_this()" />
</body>

</html>

score 9 · Answer 11 · edited Dec 26 '17 at 16:03

9

Try this simple JQuery:

$('#select-all').click(function(event) {
  if (this.checked) {
    $(':checkbox').prop('checked', true);
  } else {
    $(':checkbox').prop('checked', false);
  }
});

edited Dec 26 '17 at 16:03

William-H-M

1,050
1
13
19

answered Mar 20 '15 at 07:50

Divyank Sabhaya

265
3
5

1

You can simplify that to `$(':checkbox').prop('checked', this.checked)`, no need for the conditional. – Sumit Jan 13 '17 at 06:32

score 9 · Answer 12 · answered Jan 21 '22 at 03:10

9

It's rather simple:

const selectAllCheckboxes = () => {
  const checkboxes = document.querySelectorAll('input[type=checkbox]');
  checkboxes.forEach((cb) => { cb.checked = true; });
}

answered Jan 21 '22 at 03:10

Roman Pushkin

5,639
3
40
58

score 7 · Answer 13 · edited Nov 25 '20 at 00:10

This sample works with native JavaScript where the checkbox variable name varies, i.e. not all "foo."

<!DOCTYPE html>
<html>
<body>

<p>Toggling checkboxes</p>
<script>
function getcheckboxes() {
    var node_list = document.getElementsByTagName('input');
    var checkboxes = [];
    for (var i = 0; i < node_list.length; i++) 
    {
        var node = node_list[i];
        if (node.getAttribute('type') == 'checkbox') 
        {
            checkboxes.push(node);
        }
    } 
    return checkboxes;
}
function toggle(source) {
    checkboxes = getcheckboxes();
    for (var i = 0 n = checkboxes.length; i < n; i++) 
    {
        checkboxes[i].checked = source.checked;
    }
}
</script>    

<input type="checkbox" name="foo1" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo2" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo3" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo4" value="bar4"> Bar 4<br/>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

</body>
</html>

your `getcheckboxes` function could be replaced with `document.querySelectorAll('input[type=checkbox]');` — Kaiido, Apr 15 '16 at 02:54

score 6 · Answer 14 · edited Dec 22 '08 at 14:59

6

JavaScript is your best bet. The link below gives an example using buttons to de/select all. You could try to adapt it to use a check box, just use you 'select all' check box' onClick attribute.

Javascript Function to Check or Uncheck all Checkboxes

This page has a simpler example

http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html

edited Dec 22 '08 at 14:59

nickf

537,072
198
649
721

answered Dec 22 '08 at 13:56

Cogsy

5,584
4
35
47

score 5 · Answer 15 · edited Nov 25 '20 at 09:52

If adopting the top answer for jQuery, remember that the object passed to the click function is an EventHandler, not the original checkbox object. Therefore code should be modified as follows.

HTML

<input type="checkbox" name="selectThemAll"/> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

Javascript

$(function() {
    jQuery("[name=selectThemAll]").click(function(source) { 
        checkboxes = jQuery("[name=foo]");
        for(var i in checkboxes){
            checkboxes[i].checked = source.target.checked;
        }
    });
})

not only is the first input type wrong, but even after correcting it this did not work for me — Error Messages, Feb 28 '20 at 03:30

score 4 · Answer 16 · edited May 09 '12 at 13:29

<asp:CheckBox ID="CheckBox1" runat="server" Text="Select All" onclick="checkAll(this);" />
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem Value="Item 1">Item 1</asp:ListItem>
    <asp:ListItem Value="Item 2">Item 2</asp:ListItem>
    <asp:ListItem Value="Item 3">Item 3</asp:ListItem>
    <asp:ListItem Value="Item 4">Item 4</asp:ListItem>
    <asp:ListItem Value="Item 5">Item 5</asp:ListItem>
    <asp:ListItem Value="Item 6">Item 6</asp:ListItem>
</asp:CheckBoxList>

<script type="text/javascript">
    function checkAll(obj1) {
        var checkboxCollection = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName('input');

        for (var i = 0; i < checkboxCollection.length; i++) {
            if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") {
                checkboxCollection[i].checked = obj1.checked;
            }
        }
    }
</script>

score 4 · Answer 17 · answered Feb 26 '13 at 15:11

4

that should do the job done:

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

answered Feb 26 '13 at 15:11

Rachid O

13,013
15
66
92

score 3 · Answer 18 · answered Oct 12 '17 at 20:21

You may have different sets of checkboxes on the same form. Here is a solution that selects/unselects checkboxes by class name, using vanilla javascript function document.getElementsByClassName

The Select All button

<input type='checkbox' id='select_all_invoices' onclick="selectAll()"> Select All

Some of the checkboxes to select

<input type='checkbox' class='check_invoice' id='check_123' name='check_123' value='321' />
<input type='checkbox' class='check_invoice' id='check_456' name='check_456' value='852' />

The javascript

    function selectAll() {
        var blnChecked = document.getElementById("select_all_invoices").checked;
        var check_invoices = document.getElementsByClassName("check_invoice");
        var intLength = check_invoices.length;
        for(var i = 0; i < intLength; i++) {
            var check_invoice = check_invoices[i];
            check_invoice.checked = blnChecked;
        }
    }

It does work. Please check out https://codepen.io/kustomweb/pen/gZqwLV — Nicolas Giszpenc, Jan 14 '19 at 18:32

score 3 · Answer 19 · answered Jul 19 '18 at 06:59

This is what this will do, for instance if you have 5 checkboxes, and you click check all,it check all, now if you uncheck all the checkbox probably by clicking each 5 checkboxs, by the time you uncheck the last checkbox, the select all checkbox also gets unchecked

$("#select-all").change(function(){
   $(".allcheckbox").prop("checked", $(this).prop("checked"))
  })
  $(".allcheckbox").change(function(){
      if($(this).prop("checked") == false){
          $("#select-all").prop("checked", false)
      }
      if($(".allcheckbox:checked").length == $(".allcheckbox").length){
          $("#select-all").prop("checked", true)
      }
  })

The `.prop()` solved my problem... `.attr()` or `.checked =` didn't :/ — Axel Samyn, Jan 10 '22 at 11:43

user219901 · Answer 20 · 2023-07-18T08:08:33.453

3

As I cannot comment, here as answer: I would write Can Berk Güder's solution in a more general way, so you may reuse the function for other checkboxes

<script type="text/javascript">
  function toggleCheckboxes(source, cbName) {
    checkboxes = document.getElementsByName(cbName);
    for (var i = 0, n = checkboxes.length; i < n; i++) {
      checkboxes[i].checked = source.checked;
    }
  }
</script>

<input type="checkbox" onClick="toggleCheckboxes(this,\'foo\')" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
<input type="checkbox" name="foo" value="bar5"> Bar 5<br/>

edited Jul 18 '23 at 08:08

answered Mar 22 '19 at 12:38

user219901

71
1
6

Thanks khaldi and Clarity for pointing out the missing bracket! – user219901 Aug 27 '19 at 10:34
The `language` attribute on `script` elements was [deprecated long ago](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#deprecated_attributes). If you must add an attribute (and there is no requirement to do so), use the `type` attribute with the appropriate MIME type. See also [HTML Script tag: type or language (or omit both)?](https://stackoverflow.com/q/2267476/215552) – Heretic Monkey Jul 13 '23 at 15:58
Ok, thank you Heretic Monkey! I updated the code. – user219901 Jul 18 '23 at 08:09

score 2 · Answer 21 · answered Nov 09 '14 at 10:28

2

$(document).ready(function() {
                $(document).on(' change', 'input[name="check_all"]', function() {
                    $('.cb').prop("checked", this.checked);
                });
            });

answered Nov 09 '14 at 10:28

xrcwrn

5,339
17
68
129

blazkovicz · Answer 22 · 2015-09-01T08:02:45.307

Using jQuery and knockout:

With this binding main checkbox stays in sync with underliying checkboxes, it will be unchecked unless all checkboxes checked.

ko.bindingHandlers.allChecked = {
  init: function (element, valueAccessor) {
    var selector = valueAccessor();

    function getChecked () {
      element.checked = $(selector).toArray().every(function (checkbox) {
        return checkbox.checked;
      });
    }

    function setChecked (value) {
      $(selector).toArray().forEach(function (checkbox) {
        if (checkbox.checked !== value) {
          checkbox.click();
        }
      });
    }

    ko.utils.registerEventHandler(element, 'click', function (event) {
      setChecked(event.target.checked);
    });

    $(window.document).on('change', selector, getChecked);

    ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
      $(window.document).off('change', selector, getChecked);
    });

    getChecked();
  }
};

in html:

<input id="check-all-values" type="checkbox" data-bind="allChecked: '.checkValue'"/>
<input id="check-1" type="checkbox" class="checkValue"/>
<input id="check-2" type="checkbox" class="checkValue"/>

I don't know enough about knockout (I am using ko3.4 from cdnjs.cloudflare.com but the above seems not to work - at all. I can set a breakpoint on the initial init: call which gets triggered when the page loads( which I assume is correct), but stepping into this yields nothing - none of the rest of the function is executed. Setting breakpoint on the other functions, and they never get triggered. — Tony Suffolk 66, Jan 26 '16 at 01:47
Tony Suffolk, there art two event handlers set: onclick and onchange for checkbox, and checkbox value is updated at the end of the code. If this code does not work in your project, check data-bind attribute for checkbox. — blazkovicz, Dec 14 '16 at 07:29

score 2 · Answer 23 · answered Apr 26 '18 at 15:48

to make it in short-hand version by using jQuery

The select all checkbox

<input type="checkbox" id="chkSelectAll">

The children checkbox

<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">

jQuery

$("#chkSelectAll").on('click', function(){
     this.checked ? $(".chkDel").prop("checked",true) : $(".chkDel").prop("checked",false);  
})

score 2 · Answer 24 · answered Mar 02 '20 at 16:03

Below methods are very Easy to understand and you can implement existing forms in minutes

With Jquery,

$(document).ready(function() {
  $('#check-all').click(function(){
    $("input:checkbox").attr('checked', true);
  });
  $('#uncheck-all').click(function(){
    $("input:checkbox").attr('checked', false);
  });
});

in HTML form put below buttons

<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a>

With just using javascript,

<script type="text/javascript">
function checkAll(formname, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}
</script>

in HTML form put below buttons

<button onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</button>

<button onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</button>

score 1 · Answer 25 · answered Sep 12 '16 at 05:52

Here is a backbone.js implementation:

events: {
    "click #toggleChecked" : "toggleChecked"
},
toggleChecked: function(event) {

    var checkboxes = document.getElementsByName('options');
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = event.currentTarget.checked;
    }

},

score 1 · Answer 26 · answered Feb 14 '17 at 16:58

html

<input class='all' type='checkbox'> All
<input class='item' type='checkbox' value='1'> 1
<input class='item' type='checkbox' value='2'> 2
<input class='item' type='checkbox' value='3'> 3

javascript

$(':checkbox.all').change(function(){
  $(':checkbox.item').prop('checked', this.checked);
});

score 1 · Answer 27 · answered Mar 20 '17 at 11:39

1: Add the onchange event Handler

<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>

2: Modify the code to handle checked/unchecked

 function checkAll(ele) {
     var checkboxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }

Please do not copy paste code, instead refer with a link https://stackoverflow.com/questions/19282219/check-uncheck-all-the-checkboxes-in-a-table — java_dude, Jan 19 '18 at 14:36

score 1 · Answer 28 · answered Feb 14 '21 at 21:04

You can Use This code.

var checkbox = document.getElementById("dlCheckAll4Delete");
checkbox.addEventListener("click", function (event) {
  let checkboxes = document.querySelectorAll(".dlMultiDelete");
  checkboxes.forEach(function (ele) {
    ele.checked = !!checkbox.checked;
  });
});

score 0 · Answer 29 · answered Nov 09 '17 at 17:10

0

You can use this simple code

$('.checkall').click(function(){
    var checked = $(this).prop('checked');
    $('.checkme').prop('checked', checked);
});

answered Nov 09 '17 at 17:10

Jems

1,666
4
20
50

score 0 · Answer 30 · answered Jun 14 '18 at 20:42

Maybe a bit late, but when dealing with a check all checkbox, I believe you should also handle the scenario for when you have the check all checkbox checked, and then unchecking one of the checkboxes below.

In that case it should automatically uncheck the check all checkbox.

Also when manually checking all the checkboxes, you should end up with the check all checkbox being automatically checked.

You need two event handlers, one for the check all box, and one for when clicking any of the single boxes below.

// HANDLES THE INDIVIDUAL CHECKBOX CLICKS
function client_onclick() {
    var selectAllChecked = $("#chk-clients-all").prop("checked");

    // IF CHECK ALL IS CHECKED, AND YOU'RE UNCHECKING AN INDIVIDUAL BOX, JUST UNCHECK THE CHECK ALL CHECKBOX.
    if (selectAllChecked && $(this).prop("checked") == false) {
        $("#chk-clients-all").prop("checked", false);
    } else { // OTHERWISE WE NEED TO LOOP THROUGH INDIVIDUAL CHECKBOXES AND SEE IF THEY ARE ALL CHECKED, THEN CHECK THE SELECT ALL CHECKBOX ACCORDINGLY.
        var allChecked = true;
        $(".client").each(function () {
            allChecked = $(this).prop("checked");
            if (!allChecked) {
                return false;
            }
        });
        $("#chk-clients-all").prop("checked", allChecked);
    }
}

// HANDLES THE TOP CHECK ALL CHECKBOX
function client_all_onclick() {
    $(".client").prop("checked", $(this).prop("checked"));
}

score -2 · Answer 31 · answered Oct 06 '16 at 14:44

Simple and to the POINT:

jQuery - Upon Clicking a button or div or a label element. Check off all checkboxes on the page. Keep in mind you'll have to adjust :checkbox to make it more specific.

jQuery("#My-Button").click(function() {

  jQuery(':checkbox').each(function() {
    if(this.checked == true) {
      this.checked = false;                        
    } else {
      this.checked = true;                        
    }      
  });

});

How to implement "select all" check box in HTML?

31 Answers31

Linked

Related