samedi 25 juin 2016

Setting checkboxes using Jquery

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);




Aucun commentaire:

Enregistrer un commentaire