Setting checkboxes using Jquery

Question

I have a dynamic form that has a number of checkboxes in it. I want to create a "select all" method that when clicked automatically checks all the boxes in the form.

[x] select all //<input type="checkbox" id="select-all"> Select all

[] item 1 //<input type="checkbox" id="1" class="checkbox1" value="1">
[] item 2 //<input type="checkbox" id="2" class="checkbox1" value="2">

[submit]

My jQuery is as follows:

$(document).ready(function(){
    $('#select-all').click(function() {
        if (this.checked)
        {
        console.log("Check detected");

        $('.checkbox1').each(function() {
            console.log('Checking the item with value:' + this.value );
            $(this).prop('checked', true);
            console.log(this);

        });

    } else {
        console.log("not checked");
    }
});

});

My console output:

> Check detected
> Checking the item with value:1
> <input type="checkbox" id="1" class="checkbox1" value="1">
> Checking the item with value:2
> <input type="checkbox" id="2" class="checkbox1" value="2">

I am able to loop through each item however, I am not sure how to actually set the checkbox to checked.

The part I am struggling with is the actual setting of the checked state, I know I need to use: .prop('checked',true) however, what do I use for the actual element? $(this) obviously does not work...

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

`$(this)` inside the `each` refer to the current element in the collection. In your case, you don't even need `each`. Just use `$('.checkbox1').prop('checked', true);` jQuery will do looping for you. — Tushar, Jun 25 '16 at 13:03
The code shown should work, or `this.checked=true`, but you don't need the loop, you can do what the other comments suggest. — nnnnnn, Jun 25 '16 at 13:05
As the HTML is dynamically generated(and I saw console logs too), try `$(document).on('change', '#select-all', function() {` — Tushar, Jun 25 '16 at 13:06

Mohammad · Accepted Answer · 2016-06-25T13:08:17.653

0

Use this simple code

$(".checkAll").change(function(){
    $('.checkbox1').prop('checked', this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Check all</label>
<input type="checkbox" class="checkAll" />

<br/><br/>
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />
<input type="checkbox" class="checkbox1" />

edited Jun 25 '16 at 13:08

answered Jun 25 '16 at 13:06

Mohammad

21,175
15
55
84

You don't need the if/else. `$('.checkbox1').prop('checked', this.checked)` – nnnnnn Jun 25 '16 at 13:07
You don't even need `if...else`. Use `$('.checkbox1').prop('checked', this.checked');` BTW, this doesn't answer the qeustion. – Tushar Jun 25 '16 at 13:07
Thanks guys - as mentioned in my answer it turns out that Jquery Uniform was causing the updated checks not to display... – HappyCoder Jun 25 '16 at 13:28

Maksym Semenykhin · Answer 2 · 2016-06-25T13:19:09.887

demo link

js code

$('.checkbox1').click(function(event) {
    var _this = $(this);
    if (!_this.prop('checked')) {
        $('#select-all').prop('checked', false)
    }
})

$('#select-all').click(function() {

    var _this = $(this);
    var _value = _this.prop('checked');
    console.log("Check detected");

    $('.checkbox1').each(function() {
        console.log('Checking the item with value:' + this.value);
        $(this).prop('checked', _value);
        console.log(this);

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select-all"> Select all

<input type="checkbox" id="1" class="checkbox1" value="1">

<input type="checkbox" id="2" class="checkbox1" value="2">

score 0 · Answer 3 · answered Jun 25 '16 at 13:16

You are referring #select-all as (this.checked) ,You need to refer as $(this).

Secondly you can use :checked to find out if it is checked or not.

Thirdly you dont need to loop over $('.checkbox1'). jquery will match all elements and will update the attribute.

Below is the snippet which may be helpful

$(document).ready(function() {
    $('#select-all').click(function() {
        if ($(this).is(":checked")) {
            console.log("Check detected");
            $('.checkbox1').prop('checked', true)
        } else {
            $('.checkbox1').prop('checked', false)
        }
    });
   // If select-all is selected and if one check box is unchecked , 
   //then select-all will be unchecked
    $('.checkbox1').click(function(event) {
        if ($(this).is(':checked')) {
            // #select-all must be checked when all checkbox are checked
        } else {
            if ($('#select-all').is(':checked')) {
                $('#select-all').prop('checked', false)
            }
        }
    })
});

JSFIDDLE

`this.checked` is fine, indeed it's better than calling two functions and creating a jQuery object that you only use once and don't need in the first place with `$(this).is(":checked")`. — nnnnnn, Jun 25 '16 at 13:19
@nnnnnn i was not aware of that. Thank you learnt something new — brk, Jun 25 '16 at 13:22

score 0 · Answer 4 · edited May 23 '17 at 11:52

Just to answer this question. I tried the various solutions offered and they appeared not to work. However I then realised that due to using Jquery Uniform I needed to add an additional bit of code to get the display to work correctly:

This post was helpful.

Thank you to all who have taken the time to answer.

My final code:

$(document).ready(function(){
    $('#select-all').click(function() {
        if (this.checked)
        {
            $('.checkbox1').prop('checked', true);

        } else {
            $('.checkbox1').prop('checked', false);
        }
        $.uniform.update('.checkbox1');
    });
});

Setting checkboxes using Jquery

4 Answers4