How to check all checkboxes using jQuery?

Question

I am not expert with jQuery but I have tried to create a little script for my application. I want to check all checkboxes but it isn't working correctly.

First I tried to use attr and after that I tried with prop but I'm doing something wrong.

I tried this first:

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').attr('checked','checked');
  } else {
      $('input:checkbox').removeAttr('checked');
  }       
});

But this didn't work.

Next: This worked better than above code

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').prop('checked',true);
  } else {
      $('input:checkbox').prop('checked', false);
  }       
});

Both examples don't work.

JSFiddle: http://jsfiddle.net/hhZfu/4/

possible duplicate of [.prop() vs .attr()](http://stackoverflow.com/questions/5874652/prop-vs-attr) — Liam, Jun 04 '14 at 09:46
Possible duplicate of [Select all checkboxes with jQuery](http://stackoverflow.com/questions/2228382/select-all-checkboxes-with-jquery) — Stewart, Apr 01 '17 at 15:20
here is a link to my codepen that does exactly this https://codepen.io/nickhq/pen/pZJVEr — Nixon Kosgei, Jul 12 '18 at 17:31

score 387 · Accepted Answer · edited Jun 04 '14 at 09:45

387

You need to use .prop() to set the checked property

$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

Demo: Fiddle

edited Jun 04 '14 at 09:45

Liam

27,717
28
128
190

answered Aug 30 '13 at 16:32

Arun P Johny

384,651
66
527
531

1

Wow thanks for fast answer. This work good but in my app i have one fake check. when i refresh page `ctrl+r` and click on checkbox `checkAll` he dont check me all. After that i must check again to be successfull. So i need 2x click on `checkAll` whay that dont work on single click(one)? I copy paste that code and make function `checkAll()` and in checkbox i set `onclick="return checkAll()"` – Ivan Aug 30 '13 at 16:41
3

If you're going to use jQuery, then use jQuery. It's not a good idea to mix up jQuery with inline Javascript. For example, this is bad: ` – cssyphus Aug 30 '13 at 16:57
5

What is the difference between your post [this](http://stackoverflow.com/a/17902476/2218697) answer , why used `not(this).prop` ? – Shaiju T Nov 16 '16 at 08:00
1

@ArunPJohny, id should be unique in a single page, how we can use same function using class example https://jsfiddle.net/52uny55w/ – jvk Jan 24 '18 at 17:28
@ArunPJohny, thanks for you time. I want to learn many things from you on jquery, can you suggest me on jquery – jvk Jan 26 '18 at 16:55
In chromium it doesn't work. I had to change the second line to: $('input:checkbox').not($(this)).prop('checked', $(this).prop('checked')); – Tama May 28 '19 at 12:01
Warning - depending on your HTML table setup (and number of `tr`s), this may freeze with 'Page unresponsive' messages or similar per browser. – jg2703 Sep 03 '20 at 09:40

Adil · Answer 2 · 2019-01-29T06:55:28.723

Simply use the checked property of the checkAll and use use prop() instead of attr for checked property

Live Demo

 $('#checkAll').click(function () {    
     $('input:checkbox').prop('checked', this.checked);    
 });

Use prop() instead of attr() for properties like checked

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method

You have same id for checkboxes and its should be unique. You better use some class with the dependent checkboxes so that it does not include the checkboxes you do not want. As $('input:checkbox') will select all checkboxes on the page. If your page is extended with new checkboxes then they will also get selected/un-selected. Which might not be the intended behaviour.

Live Demo

$('#checkAll').click(function () {    
    $(':checkbox.checkItem').prop('checked', this.checked);    
});

score 56 · Answer 3 · edited Oct 23 '17 at 11:30

56

A complete solution is here.

$(document).ready(function() {
    $("#checkedAll").change(function() {
        if (this.checked) {
            $(".checkSingle").each(function() {
                this.checked=true;
            });
        } else {
            $(".checkSingle").each(function() {
                this.checked=false;
            });
        }
    });

    $(".checkSingle").click(function () {
        if ($(this).is(":checked")) {
            var isAllChecked = 0;

            $(".checkSingle").each(function() {
                if (!this.checked)
                    isAllChecked = 1;
            });

            if (isAllChecked == 0) {
                $("#checkedAll").prop("checked", true);
            }     
        }
        else {
            $("#checkedAll").prop("checked", false);
        }
    });
});

Html should be :

Single check box on checked three checkbox will be select and deselect.

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

<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />

Hope this helps to someone as it did for me.

JS Fiddle https://jsfiddle.net/52uny55w/

edited Oct 23 '17 at 11:30

Adeel

2,901
7
24
34

answered Sep 06 '14 at 05:30

SSR

6,398
4
34
50

3

I like this solution since if you uncheck one of the boxes, the "Check All" box also becomes unchecked. Likewise, if you manually check all the corresponding boxes, the "Check All" box gets checked, too. That is great UI feedback there! – HPWD Dec 22 '17 at 19:16
2

You can make `$("#checkedAll").change` function shorter by changing it to: `var val = this.checked; $(".checkSingle").each( function() { this.checked=val; });` – Gellie Ann Feb 21 '20 at 04:07
1

Also, I think it's better to rename the `isAllChecked` variable to `isThereUnchecked` or `unChecked` so it will be more descriptive on what the variable was used for. – Gellie Ann Feb 21 '20 at 04:25
1

I took this solution, this is what i'm looking for thanks – Ajay Kumar Mar 11 '20 at 08:50
This is what I'm looking for a long time... Thnx! – Wilf Jul 05 '21 at 09:58

Ankit · Answer 4 · 2018-05-07T05:37:10.457

I think when user select all checkbox manually then checkall should be checked automatically or user unchecked one of them from all selected checkbox then checkall should be unchecked automically. here is my code..

$('#checkall').change(function () {
    $('.cb-element').prop('checked',this.checked);
});

$('.cb-element').change(function () {
 if ($('.cb-element:checked').length == $('.cb-element').length){
  $('#checkall').prop('checked',true);
 }
 else {
  $('#checkall').prop('checked',false);
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>
<input type="checkbox" class="cb-element" /> Checkbox  1</br>
<input type="checkbox" class="cb-element" /> Checkbox  2</br>
<input type="checkbox" class="cb-element" /> Checkbox  3

Thank you! I prefer this because after all checkbox checked, when we uncheck one of them, check all checkbox will be unchecked. — Rizqi N. Assyaufi, Dec 10 '19 at 01:01

zarpio · Answer 5 · 2021-01-14T13:41:34.957

$(document).ready(function() {
  $("#parent").click(function() {
    $(".child").prop("checked", this.checked);
  });

  $('.child').click(function() {
    if ($('.child:checked').length == $('.child').length) {
      $('#parent').prop('checked', true);
    } else {
      $('#parent').prop('checked', false);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p><input type="checkbox" id="parent" /> Check/Uncheck All</p>
<ul>
  <li>
    <input type="checkbox" class="child" /> Checkbox 1</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 2</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 3</li>
</ul>

HTML:

<p><input type="checkbox" id="parent" /> Check/Uncheck All</p>
<ul>
  <li>
    <input type="checkbox" class="child" /> Checkbox 1</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 2</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 3</li>
</ul>

jQuery:

$(document).ready(function() {
  $("#parent").click(function() {
    $(".child").prop("checked", this.checked);
  });

  $('.child').click(function() {
    if ($('.child:checked').length == $('.child').length) {
      $('#parent').prop('checked', true);
    } else {
      $('#parent').prop('checked', false);
    }
  });
});

score 8 · Answer 6 · answered Nov 15 '14 at 07:20

Why don't you try this (in the 2nd line where 'form#' you need to put the proper selector of your html form):

$('.checkAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',true);
   })               
});

$('.uncheckAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',false);
   })               
});

Your html should be like this:

<form id="myForm">
      <span class="checkAll">checkAll</span>
      <span class="uncheckAll">uncheckAll</span>
      <input type="checkbox" class="checkSingle"></input>
      ....
</form>

I hope that helps.

score 5 · Answer 7 · answered Jun 21 '17 at 22:38

5

Simplest way I know:

$('input[type="checkbox"]').prop("checked", true);

answered Jun 21 '17 at 22:38

Davidson Lima

788
9
17

score 2 · Answer 8 · answered Sep 07 '18 at 06:58

2

$('#checkAll').on('change', function(){
    if($(this).attr('checked')){
        $('input[type=checkbox]').attr('checked',true);
    }
    else{
        $('input[type=checkbox]').removeAttr('checked');
    }
});

answered Sep 07 '18 at 06:58

Sunny

21
1

LowLevel · Answer 9 · 2016-01-15T16:30:47.020

Usually you also want the master checkbox to be unchecked if at least 1 slave checkbox is unchecked and to be ckecked if all slave checkboxes are checked:

/**
 * Checks and unchecks checkbox-group with a master checkbox and slave checkboxes
 * @param masterId is the id of master checkbox
 * @param slaveName is the name of slave checkboxes
 */
function checkAll(masterId, slaveName) {
    $master = $('#' + masterId);
    $slave = $('input:checkbox[name=' + slaveName + ']');

    $master.click(function(){
        $slave.prop('checked', $(this).prop('checked'));
        $slave.trigger('change');
    });

    $slave.change(function() {
        if ($master.is(':checked') && $slave.not(':checked').length > 0) {
            $master.prop('checked', false);
        } else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
        $master.prop('checked', 'checked');
    }
    });
}

And if you want to enable any control (e.g. Remove All button or a Add Something button), when at least one checkbox is checked and disable when no checkbox is checked:

/**
 * Checks and unchecks checkbox-group with a master checkbox and slave checkboxes,
 * enables or disables a control when a checkbox is checked
 * @param masterId is the id of master checkbox
 * @param slaveName is the name of slave checkboxes
 */
function checkAllAndSwitchControl(masterId, slaveName, controlId) {
    $master = $('#' + masterId);
    $slave = $('input:checkbox[name=' + slaveName + ']');

    $master.click(function(){
        $slave.prop('checked', $(this).prop('checked'));
        $slave.trigger('change');
    });

    $slave.change(function() {
        switchControl(controlId, $slave.filter(':checked').length > 0);
        if ($master.is(':checked') && $slave.not(':checked').length > 0) {
            $master.prop('checked', false);
        } else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
        $master.prop('checked', 'checked');
    }
    });
}

/**
 * Enables or disables a control
 * @param controlId is the control-id
 * @param enable is true, if control must be enabled, or false if not
 */
function switchControl(controlId, enable) {
    var $control = $('#' + controlId);
    if (enable) {
        $control.removeProp('disabled');
    } else {
        $control.prop('disabled', 'disabled');
    }
}

score 1 · Answer 10 · answered May 17 '17 at 12:14

One checkbox to rule them all

For people still looking for plugin to control checkboxes through one that's lightweight, has out-of-the-box support for UniformJS and iCheck and gets unchecked when at least one of controlled checkboxes is unchecked (and gets checked when all controlled checkboxes are checked of course) I've created a jQuery checkAll plugin.

Feel free to check the examples on documentation page.

For this question example all you need to do is:

$( "#checkAll" ).checkall({
    target: "input:checkbox"
});

Isn't that clear and simple?

score 1 · Answer 11 · answered Jun 21 '17 at 09:26

    <p id="checkAll">Check All</p>
<hr />
<input type="checkbox" class="checkItem">Item 1
<input type="checkbox" class="checkItem">Item 2
<input type="checkbox" class="checkItem">Item3

And jquery

$(document).on('click','#checkAll',function () {
     $('.checkItem').not(this).prop('checked', this.checked);
 });

score 1 · Answer 12 · edited Oct 30 '17 at 21:26

1

You can run .prop() on the results of a jQuery Selector directly even if it returns more than one result. So:

$("input[type='checkbox']").prop('checked', true)

edited Oct 30 '17 at 21:26

Brendon Muir

4,540
2
33
55

answered Oct 30 '17 at 20:30

echo

900
1
9
17

Hoàng Vũ Tgtt · Answer 13 · 2021-04-27T05:44:24.690

my solution

$(function() {
    $(".checkAll").click(function(){
        checkwhat  = $(this).data("checkwhat");
        $('input:checkbox.'+checkwhat).not(this).prop('checked', this.checked);
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<lablel><input type="checkbox" name="chkSelectAll" class="checkAll" data-checkwhat="chkSelect">check all group 1</lablel>
<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="1">  value 1.1<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="2"> value 1.2<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="3">  value 1.2<br>
<br>
<br>
<lablel><input type="checkbox" name="chkSelectAll" class="checkAll" data-checkwhat="chkSelect2">check all group 1</lablel>
<br>
<input class="chkSelect2" type="checkbox" name="chkSelect[]" value="1"> value 2.1<br>
<input class="chkSelect2" type="checkbox" name="chkSelect[]" value="4">value 2.1<br>

PK-1825 · Answer 14 · 2016-05-11T08:37:54.830

HTML

<HTML>
<HEAD>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
    <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>Droid X</td>
    <td>4.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>HTC Desire</td>
    <td>3/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>Apple iPhone 4</td>
    <td>5/5</td>
</tr>
</table>

</BODY>
</HTML>

jQuery Code

<SCRIPT language="javascript">
$(function(){

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});
</SCRIPT>

View Demo

Click here to View Demo

score 0 · Answer 15 · answered Nov 09 '16 at 15:47

0

use .prop() to get the value of a property

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

answered Nov 09 '16 at 15:47

phoenix

127
1
10

score 0 · Answer 16 · answered Feb 07 '17 at 07:07

i know there are lot of answer posted here but i would like to post this for optimization of code and we can use it globally.

i tried my best

/*----------------------------------------
 *  Check and uncheck checkbox which will global
 *  Params : chk_all_id=id of main checkbox which use for check all dependant, chk_child_pattern=start pattern of the remain checkboxes 
 *  Developer Guidline : For to implement this function Developer need to just add this line inside checkbox {{ class="check_all" dependant-prefix-id="PATTERN_WHATEVER_U_WANT" }}
 ----------------------------------------*/
function checkUncheckAll(chk_all_cls,chiled_patter_key){
    if($("."+chk_all_cls).prop('checked') == true){
        $('input:checkbox[id^="'+chiled_patter_key+'"]').prop('checked', 'checked');
    }else{
        $('input:checkbox[id^="'+chiled_patter_key+'"]').removeProp('checked', 'checked');
    }        
}

if($(".check_all").get(0)){
    var chiled_patter_key = $(".check_all").attr('dependant-prefix-id');

    $(".check_all").on('change',function(){        
        checkUncheckAll('check_all',chiled_patter_key);
    });

    /*------------------------------------------------------
     * this will remain checkbox checked if already checked before ajax call! :)
     ------------------------------------------------------*/
    $(document).ajaxComplete(function() {
        checkUncheckAll('check_all',chiled_patter_key);
    });
}

I hope this will help!

score 0 · Answer 17 · edited Feb 19 '18 at 17:07

0

function checkAll(class_name) {
    $("." + class_name).each(function () { 
        if (this.checked == true) 
            this.checked = false; 
        else 
            this.checked = true; 
    }); 
}

edited Feb 19 '18 at 17:07

Suraj Shrestha

1,790
1
25
51

answered Dec 27 '17 at 05:37

Ganga Reddy

11
1
5

score 0 · Answer 18 · answered Sep 26 '18 at 10:06

checkall is the id of allcheck box and cb-child is the name of each checkboxes that will be checked and unchecked depend on checkall click event

$("#checkall").click(function () {
                        if(this.checked){
                            $("input[name='cb-child']").each(function (i, el) {
                                el.setAttribute("checked", "checked");
                                el.checked = true;
                                el.parentElement.className = "checked";

                            });
                        }else{
                            $("input[name='cb-child']").each(function (i, el) {
                                el.removeAttribute("checked");
                                el.parentElement.className = "";
                            });
                        }
                    });

Code · Answer 19 · 2018-10-06T11:32:02.077

*JAVA SCRIPT TO SELECT ALL CHECK BOX *

Best Solution.. Try it

<script type="text/javascript">
        function SelectAll(Id) {
            //get reference of GridView control
            var Grid = document.getElementById("<%= GridView1.ClientID %>");
            //variable to contain the cell of the Grid
            var cell;

            if (Grid.rows.length > 0) {
                //loop starts from 1. rows[0] points to the header.
                for (i = 1; i < grid.rows.length; i++) {
                    //get the reference of first column
                    cell = grid.rows[i].cells[0];

                    //loop according to the number of childNodes in the cell
                    for (j = 0; j < cell.childNodes.length; j++) {
                        //if childNode type is CheckBox                 
                        if (cell.childNodes[j].type == "checkbox") {
                            //Assign the Status of the Select All checkbox to the cell checkbox within the Grid
                            cell.childNodes[j].checked = document.getElementById(Id).checked;
                        }
                    }
                }
            }
        }
    </script>

score -1 · Answer 20 · answered Aug 15 '14 at 12:26

You Can use below Simple Code:

function checkDelBoxes(pForm, boxName, parent)
{
    for (i = 0; i < pForm.elements.length; i++)
        if (pForm.elements[i].name == boxName)
            pForm.elements[i].checked = parent;
}

Example for Using:

<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', true);return false;"> Select All
</a>
<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', false);return false;"> Unselect All
</a>

score -1 · Answer 21 · edited Nov 05 '14 at 06:17

-1

if(isAllChecked == 0)
{ 
    $("#select_all").prop("checked", true); 
}

please change the above line to

if(isAllChecked == 0)
{ 
    $("#checkedAll").prop("checked", true); 
}

in SSR's answer and its working perfect Thank you

edited Nov 05 '14 at 06:17

Mayank Jain

5,663
7
32
65

answered Nov 05 '14 at 05:24

Premjith

163
2
13

score -1 · Answer 22 · answered Mar 02 '15 at 05:31

-1

if($('#chk_all').is(":checked"))
 {
    $('#'+id).attr('checked', true);
 }
else
 {
    $('#'+id).attr('checked', false);
 }

answered Mar 02 '15 at 05:31

Dsu Menaria

12
2

Would be handy if you explained the answer. – enkor Mar 02 '15 at 15:21
if you check the check box then all check box are checked as ID and then you uncheck the check box then all check box unchecked – Dsu Menaria Mar 12 '15 at 11:04

score -1 · Answer 23 · edited Oct 23 '17 at 12:58

-1

function chek_al_indi(id)
{
    var k = id;
    var cnt_descriptiv_indictr = eval($('#cnt_descriptiv_indictr').val());
    var std_cnt = 10;

    if ($('#'+ k).is(":checked"))
    {
        for (var i = 1; i <= std_cnt; i++)  
        {
            $("#chk"+ k).attr('checked',true);  
            k = k + cnt_descriptiv_indictr;
        }
    }

    if ($('#'+ k).is(":not(:checked)"))
    {
        for (var i = 1; i <= std_cnt; i++)  
        {
            $("#chk"+ k).attr('checked',false);     
            k = k + cnt_descriptiv_indictr;
        }       
    }
}

edited Oct 23 '17 at 12:58

Adeel

2,901
7
24
34

answered Mar 12 '15 at 11:14

Dsu Menaria

12
2

Why the long function ? – Jimmy Obonyo Abor Dec 31 '15 at 18:03

score -1 · Answer 24 · answered Sep 24 '15 at 13:01

-1

 $('#checkall').on("click",function(){
      $('.chk').trigger("click");
   });

answered Sep 24 '15 at 13:01

Bharat Parmar

11
3

score -1 · Answer 25 · answered Oct 09 '15 at 04:53

html :

    <div class="col-md-3 general-sidebar" id="CategoryGrid">
                                                    <h5>Category &amp; Sub Category <span style="color: red;">* </span></h5>
                                                    <div class="checkbox">
                                                        <label>
                                                            <input onclick="checkUncheckAll(this)" type="checkbox">
                                                            All
                                                        </label>
                                                    </div>
                                                <div class="checkbox"><label><input class="cat" type="checkbox" value="Quality">Quality</label></div>
<div class="checkbox"><label><input class="subcat" type="checkbox" value="Planning process and execution">Planning process and execution</label></div>

javascript:

function checkUncheckAll(ele) {
    if (ele.checked) {
        $('.cat').prop('checked', ele.checked);
        $('.subcat').prop('checked', ele.checked);
    }
    else {
        $('.cat').prop('checked', ele.checked);
        $('.subcat').prop('checked', ele.checked);
    }
}

score -1 · Answer 26 · answered Oct 28 '16 at 07:15

            <pre>
            <SCRIPT language="javascript">
            $(function(){
                // add multiple select / deselect functionality
                $("#selectall").click(function () {
                      $('.case').attr('checked', this.checked);
                });

                // if all checkbox are selected, check the selectall checkbox
                // and viceversa
                $(".case").click(function(){

                    if($(".case").length == $(".case:checked").length) {
                        $("#selectall").attr("checked", "checked");
                    } else {
                        $("#selectall").removeAttr("checked");
                    }

                });
            });
            </SCRIPT>
            <HTML>
            <HEAD>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
            <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
            </HEAD>
            <BODY>
            <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
            <table border="1">
              <tr>
                <th><input type="checkbox" id="selectall"/></th>
                <th>Cell phone</th>
                <th>Rating</th>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
                <td>BlackBerry Bold 9650</td>
                <td>2/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
                <td>Samsung Galaxy</td>
                <td>3.5/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
                <td>Droid X</td>
                <td>4.5/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
                <td>HTC Desire</td>
                <td>3/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
                <td>Apple iPhone 4</td>
                <td>5/5</td>
              </tr>
            </table>
            </BODY>
            </HTML>
            </pre>

script error in the code. script needs to be loaded first. – Satish Shetty Jun 07 '17 at 18:48 — Satish Shetty, Jun 07 '17 at 18:48

jmn · Answer 27 · 2015-01-28T02:55:51.110

-2

Trigger Click

$("#checkAll").click(function(){
    $('input:checkbox').click();
});

OR

$("#checkAll").click(function(){
    $('input:checkbox').trigger('click');
});

OR

$("#checkAll").click(function(){
    $('input:checkbox').prop('checked', this.checked);
});

edited Jan 28 '15 at 02:55

answered Jan 28 '15 at 02:36

jmn

102
1
8

How to check all checkboxes using jQuery?

27 Answers27

Linked

Related