check uncheck All checkboxes with another single checkbox use jquery

Question

I use jquery-1.9.1.js In my html page, it works well for the first time.

Can somebody help me to improve it?

<table id="tab1">
    <input type="checkbox" name="checkAll" id="checkAll">全選
    <input type="checkbox" name="book" id="book" value="book1">book1
    <input type="checkbox" name="book" id="book" value="book2">book2
    <input type="checkbox" name="book" id="book" value="book3">book3
    <input type="checkbox" name="book" id="book" value="book4">book4
    <input type="checkbox" name="book" id="book" value="book5">book5</table>

$(function () {
    $("#tab1 #checkAll").click(function () {
        if ($("#tab1 #checkAll").is(':checked')) {
            $("#tab1 input[type=checkbox]").each(function () {
                $(this).attr("checked", true);
            });

        } else {
            $("#tab1 input[type=checkbox]").each(function () {
                $(this).attr("checked", false);
            });
        }
    });
});

Based on the selectors, it looks like you are using the same ID multiple times, which is a no-no !! — adeneo, Mar 19 '13 at 16:11
While classes and names may be duplicates, the ID should always be unique. This enables JS to identify unique elements and allows you more control to manipulate the DOM. If you use the same ID name multiple times, you will get unexpected results when you attempt to get the elements by ID as only one element will be returned. — thefid, Jan 11 '18 at 21:53
Accepted answer doesn't fulfill all the OP requirements as the Select All checkbox remain selected if user unchecks any other checkbox. So, [you should follow this answer that fulfills all the OP requirements](https://stackoverflow.com/a/28631547/3240038). — Suhaib Janjua, Feb 08 '18 at 12:58

j08691 · Accepted Answer · 2013-08-12T13:41:08.300

Change

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

to

$(this).prop("checked", true);

jsFiddle example

I actually just answered another question that was similar to this. Per the .prop() docs:

The .prop() method is a convenient way to set the value of properties—especially when setting multiple properties, using values returned by a function, or setting values on multiple elements at once. It should be used when setting selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, or defaultSelected. Since jQuery 1.6, these properties can no longer be set with the .attr() method. They do not have corresponding attributes and are only properties.

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value.

Instead of `if else` and `true` and `false` you can alternatively use this `$("#checkAll").change(function () { $("input:checkbox").prop('checked', $(this).prop("checked")); });` The second argument to `.prop()` method will do all magic — Faizan Akram Dar, Feb 09 '16 at 12:25

score 10 · Answer 2 · answered Mar 19 '13 at 16:15

You should be using classes with the same name, ID's MUST be unique!

<input type="checkbox" name="checkAll" id="checkAll">全選
<input type="checkbox" name="book" class="book" value="book1">book1
<input type="checkbox" name="book" class="book" value="book2">book2
<input type="checkbox" name="book" class="book" value="book3">book3
<input type="checkbox" name="book" class="book" value="book4">book4
<input type="checkbox" name="book" class="book" value="book5">book5</table>

$(function () {
    $("#checkAll").click(function () {
        if ($("#checkAll").is(':checked')) {
            $(".book").prop("checked", true);
        } else {
            $(".book").prop("checked", false);
        }
    });
});

Suhaib Janjua · Answer 3 · 2018-02-08T13:06:55.303

As the OP requires to check uncheck all checkboxes on the basis of another checkbox id=全選.

The solution that @j08691 is provided above is good but it lacks one thing and that is, the solution doesn't uncheck the id=全選 checkbox when any other checkbox in the list goes unchecked.

So I propose a solution that checks/unchecks all the checkboxes on the basis of id=全選 checkbox and if any other checkbox is unchecked then checkbox id=全選 goes unchecked. And if user manually clicks on all the other check boxes then check box id=全選 should also be checked to reflect the relationship.

OP using the same id for multiple checkboxes which is against the rules of DOM. Element IDs should be unique within the entire document.

So the following code covers all the aspects of this kind of scenario.

HTML

<table>
    <tr>
        <td>
        <input type="checkbox" name="checkAll" id="checkAll">全選 (ALL)
        <input type="checkbox" name="book" id="book_1" value="book1">book1
        <input type="checkbox" name="book" id="book_2" value="book2">book2
        <input type="checkbox" name="book" id="book_3" value="book3">book3
        <input type="checkbox" name="book" id="book_4" value="book4">book4
        <input type="checkbox" name="book" id="book_5" value="book5">book5
        </td>
     </tr>
</table>

JQuery

$(document).ready(function() {

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

    $("[id*=book_]").change(function () {
        if ($('input[id*=book_][type=checkbox]:checked').length == $('input[id*=book_][type=checkbox]').length) {
            $('#checkAll').prop('checked', true);
        } else {
            $('#checkAll').prop('checked', false);
        }
    });

});

Description of attribute selector [name*="value"]

Selects elements that have the specified attribute with a value containing a given substring.

So $('#checkAll') returns me the parent checkbox only, on which I check/uncheck all checkboxes.

And $('[id$=book_]') returns me all the checkbox except the parent(全選) checkbox. Then on the basis of parent checkbox I check/uncheck all the other checkboxes.

I also checks the length of the checkboxes other then parent(全選) checkbox, If all the other checkboxes are check then I check the parent(全選) checkbox. So this is the way to cross check all possible condition and never misses any scenario.

Demo working JSFiddle here.

score 2 · Answer 4 · answered Jul 30 '16 at 08:11

2

the fastest way. and save some lines

   $(".ulPymnt input[type=checkbox]").each(function(){                
       $(this).prop("checked", !$(this).prop("checked"))                
   })

answered Jul 30 '16 at 08:11

Hannes Ledl

21
2

score 1 · Answer 5 · answered Jun 10 '15 at 08:24

I've just simplified @j08691 answer

$("#checkAll").click(function() {
      var allChecked = $(this);
      $("#tab1 input[type=checkbox]").each(function() {
        $(this).prop("checked", allChecked.is(':checked'));
      })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab1">
  <tr>
    <td>
      <input type="checkbox" name="checkAll" id="checkAll">Select all
      <input type="checkbox" name="book" id="book" value="book1">book1
      <input type="checkbox" name="book" id="book" value="book2">book2
      <input type="checkbox" name="book" id="book" value="book3">book3
    </td>
  </tr>
</table>

score 0 · Answer 6 · answered Mar 19 '13 at 16:16

With answer of j08691 look into following thing also..

It totally makes no sense to create a selector like #id #id because an ID has to be unique within your DOM by definition.

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

$("#tab1 .checkAll").click(function () {

score 0 · Answer 7 · edited Jul 24 '14 at 08:12

0

Add this too....FOR..... if one checkbox (id:book) is unselected means it will cause the main check box (id:checkAll) to be unselected

$("#tab1 #book").click(function () {
  if($('#book').is(':checked'))
  {
    $("#checkAll").prop("checked", false);        
  }
});

edited Jul 24 '14 at 08:12

benka

4,732
35
47
58

answered Jul 24 '14 at 08:05

Thivya

2,922
4
17
20

score 0 · Answer 8 · answered Aug 19 '14 at 05:11

$("input[name='select_all_photos']").click(function () {
        var checked = $(this).is(':checked');
        $("input[name^='delete_']").each(function () {
            $(this).prop("checked", checked);
        });
    });

Don't bother doing an if statement.

score 0 · Answer 9 · answered Dec 02 '17 at 03:20

`change click to ch  $("#checkAll").click(); to $("#checkAll").change();

> Blockquote

$(function () {
 $("#checkAll").change(function () {
  if ($("#checkAll").is(':checked')) {
   $(".book").prop("checked", true);
   } else {
   $(".book").prop("checked", false);
  }
 });
});`

score 0 · Answer 10 · answered Jun 26 '18 at 12:53

This one work for all checkbox lists. just add "check-all" to the input controlling that, which must have the same name

$(function() {
  $('.check-all').each(function(){
    var checkListName = $(this).attr('name');
    $(this).change(function(){
      //change all checkbox of the list checked status
      $('input[name="'+checkListName+'"]').prop('checked', $(this).prop('checked')); 
    });
    $('input[name="'+checkListName+'"]').change(function(){
      //change .check-all checkbox depending of the list checked status
      $('input[name="'+checkListName+'"].check-all').prop('checked', ($('input[name="'+checkListName+'"]:checked').not('.check-all').length == $('input[name="'+checkListName+'"]').not('.check-all').length));
    });
  });
});

check uncheck All checkboxes with another single checkbox use jquery

10 Answers10

Linked