how to select / unselect the checkboxes using javascript/jquery

Question

I have the following html code

html code

<p><a href="" onclick="select()">Select All</a>&nbsp; / &nbsp;<a href="" onclick="unselect()" >Unselect All</a> </p>

{% for field in fields %}
  <div class="contact_align">    
    <input id="select-unselect" type="checkbox" name="invite" value="so">{{ field }}
  </div>
{% endfor %}

<script type="text/javascript">
    function select(){
                $('#select-unselect').attr('checked',true);
            }
    function unselect(){
                $('#select-unselect').attr('checked',false);
            }               
</script>

so above is my code, and the functionality is not working , so can anyone please let me know what i am doing wrong in the above code and make it work ?

It looks like you are creating the checkboxes in a loop with an ID. That id needs to be unique. — putvande
– putvande, Commented Aug 22, 2013 at 8:14

putvande · Accepted Answer · 2013-08-22 08:32:44Z

3

You need to add a return false in your functions. Otherwise the a tags are just behaving as normal a tags and thus going to the href specified. And change the attr(...) for prop(...).

function select(){
    $('#select-unselect').prop('checked',true);
    return false;
}

function unselect(){
    $('#select-unselect').prop('checked',false);
    return false;
}

Or toggle it in one function like this:

function select(){
    $('#select-unselect').prop('checked',function(id,checked){ return !checked; });
    return false;
}

But I would recommend changing the id #select-unselect to a class .select-unselect because you can't have duplicate ids.

Also change <input id="select-unselect" type="checkbox" name="invite" value="so">{{ field }} to <input class="select-unselect" type="checkbox" name="invite" value="so">{{ field }}

edited Aug 22, 2013 at 8:32

answered Aug 22, 2013 at 8:19

putvande

15.3k3 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shiva Krishna Bavandla Over a year ago

now its i had changed href="javascript", but when i clicked on selectAll its selecting only one starting checkbox field, not all checkboxes y so ?

putvande Over a year ago

Yes, so you need to change your ids to classes as the second part of my answer says. Because JavaScript / jQuery only can select one ID (the first one).

Shiva Krishna Bavandla Over a year ago

k thanks its working after i had changed id to class, and anyway whether we can implement this functionality with only one function instead of two functions? i mean by assigning same function to both select and unselect links ?

Arun P Johny · Accepted Answer · 2013-08-22 08:38:21Z

2

use .prop(), also since you have multiple elements with the same id use class instead of id

<input class="select-unselect" type="checkbox" name="invite" value="so">{{ field }}

Then

$('.select-unselect').prop('checked',true);

edited Aug 22, 2013 at 8:38

answered Aug 22, 2013 at 8:14

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Shiva Krishna Bavandla Over a year ago

k but now , if i have four checkbox fields and when clicked on selectall, only one checkbox has been selecting and immedialtely disappearing(may be its refereshing)

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Use Prop instead of attr. Please see this link Jquery Attr to see the difference between attr and prop.
$('#select-unselect').prop('checked',true);

And try to use class instead of id of a control.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 22, 2013 at 8:28

Vikas Pawar

1351 gold badge2 silver badges12 bronze badges

Collectives™ on Stack Overflow

how to select / unselect the checkboxes using javascript/jquery

html code

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html code

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related