Jquery "select all" checkbox

Why don't you do it this way? It is more clear and readable

$('#selectall').click(function () {
    $('.selectedId').prop('checked', this.checked);
});

$('.selectedId').change(function () {
    var check = ($('.selectedId').filter(":checked").length == $('.selectedId').length);
    $('#selectall').prop("checked", check);
});

DEMO

It is because the method selectAll is not avaible in the global scope.

In the second dropdown in the left panel Frameworks and Extensions, select no -wrap head/body it will work fine.

The reason being by default onload is selected and when onload is selected all the entered script is wrapped inside a anonymous function as given below. It will make the selectAll function a local method inside the anonymous function, thus your onclick event handler which uses global scope will not get access to the method causing an Uncaught ReferenceError: selectAll is not defined error.

$(window).load(function(){
    //Entered script
});

Demo: Fiddle

Update But you can simplify it as

$(function(){
    $('#selectall').click(function(i, v){
        $('.selectedId').prop('checked', this.checked);
    });

    var checkCount = $('.selectedId').length;
    $('.selectedId').click(function(i, v){
        $('#selectall').prop('checked',$('.selectedId:checked').length  == checkCount)
    });
});

and remove all the onclick handlers from input elements as shown in this demo

Use this...

$('#selectall').on('click', function() {
    $('.selectedId').attr('checked', $(this).is(":checked"));
});

An see this DEMO

$(document).ready(function () {
    $('#selectall').click(function () {
        $('.selectedId').prop('checked', $(this).is(":checked"));
    });
});

more Optimized

This should do the trick for you.

$(document).ready(function () {
    $('#selectall').click(function () {
         var checked = $(this).is(':checked');            
        $('.selectedId').each(function () {
            var checkBox = $(this);               
            if (checked) {
                checkBox.prop('checked', true);                
            }
            else {
                checkBox.prop('checked', false);                
            }
        });

    });
});

JsFiddle http://jsfiddle.net/Ra3uL/

Assume parent checkbox has a class of mainselect and all child have class of childselect

Then selecting parent will select all checkbox and vice-versa with the code below:

$('#mainselect').live('change',function(){
if($(this).attr('checked') == 'checked') {
    $('.childselect').attr('checked','checked');
} else {
    $('.childselect').removeAttr('checked');
}
});

$(function(){

// add multiple select / deselect functionality
$("#selectall").click(function () {
      $('.case').attr('checked', this.checked);
});

// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){

    if($(".case").length == $(".case:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }

});

});

A small enhancement to @letiagoalves solution, if your checkboxes have specific processing associated with a click event. Not asked for by the OP, but something I've had to do in the past. Basically, instead of directly setting the checked property of each dependent checkbox, it compares the checked state of each dependent checkbox to the selectall checkbox, and triggers a click event on those that are in the opposite state.

$('#selectall').click(function () {
    var parentState = $(this).prop('checked');
    $('.selectedId').each(function() {
        if ($(this).prop('checked') !== parentState) {
            $(this).trigger("click");
        }
});
});

DEMO: https://jsfiddle.net/jajntuqb/2/

You can simply add the handle function to the click event on the select all checkbox:

$('#chk-all-items').click(selectAll);

And then this function should be enough to select all or unselect all.

selectAll = function (event) {
        var self = this;
        $('.template-item-select').each(function () {
            this.checked = self.checked;
        });
    }

More specific solution:

$(document).ready(function(){
  $('#checkAll').on('click', function ( e ) {
    $('input[name="chck_box[]"]').prop('checked', $(this).is(':checked'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th><input type="checkbox" id="checkAll"></th>
    <th>Name</th>
    <th>Last</th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="1"></td>
      <td>Joe</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="2"></td>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chck_box[]" value="3"></td>
      <td>Bill</td>
      <td>White</td>
    </tr>
  </tbody>
</table>