checkbox select all toggle function

I have multiple checkboxes and the first checkbox value is select all. My jQuery code is

$(".checkboxFilter input:checkbox:first").change().toggle(function () {
        alert("inside first toggle");
        $(".checkboxFilter").find(':checkbox').prop("checked", true);
    }, function () {
        alert("inside second toggle");
        $(".checkboxFilter").find(':checkbox').prop("checked", false);
    });

The issue is when I render the page, by default the select all button is checked but no other options are checked. When i click the select all checkbox again it selects all and when i click the select all button once more it deselects all 开发者_如何学JAVAbut the select all button still remains checked. Can anyone help me

Do not use toggle, just change will work. Take a look at this

Working demo

$(".checkboxFilter input:checkbox:first").change(function () {
        $(".checkboxFilter").find(':checkbox').prop("checked", this.checked);
});

You should set the default state of "Select All" to non checked or everything to checked.