Multiple Checkboxes with Select All

I modified an existing fiddle http://ift.tt/2sJuaP0 to get a comprehensive solution for multiple checkboxes with select/unselect functionality. Now, it counts how many checkboxes checked and also gives which the checkboxes checked. It looks like it works fine but there are some points to fix and needs to improve it a bit more:

1. When you first check the option A and then click the "Select All" checkbox, the system does not work well.
2. The whole code looks like it's a bit long. I think we can shorten the code someway but I don't know how.

Thanks for any contribution.

<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form">Lorem ipsum</div>

    x = document.getElementById("result");
    y = document.getElementById("form");
    x.innerHTML = '';
    y.innerHTML = '';

$("#firstgroup").click(function() {
    var checkBoxes = $("input[type='checkbox'].order");
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});


$("input[type='checkbox'].order").change(function() {
    var check       = $("input[type='checkbox'].order:checked").length;
var tnocb = $("input[type='checkbox'].order").length;
    var classes = $("input[type='checkbox'].order:checked").map(function() {
    return this.id;
}).get().join(", ");

if(check > 0) {
    if(check == 1) {
        x.innerHTML = 'Checked Checkbox: ' + classes + '<br>Total number of checked checkbox: ' + check;
    } else if(check == tnocb) {
        x.innerHTML = 'all of them are checked';
    } else {
        x.innerHTML = 'Checked Checkboxes: ' + classes + '<br>Total number of checked checkboxes: ' + check;
    }
    y.style.display = 'block';
    } else {
        x.innerHTML = '';
        y.style.display = 'none';
    }
    return false;
});