¿Como calcular los valores de varios checkbox con un botón calcular en js?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkboxes">
    <input type="checkbox" class="checkbox" value="20"> 20 <br>
    <input type="checkbox" class="checkbox" value="30"> 30 <br>
    <input type="checkbox" class="checkbox" value="40"> 40 <br>
</div>
<button type="button" id='sumar'>sumar</button> <br>
Total = <span id='total'>0</span>

<script>
    $('#sumar').click(function (e) {
        var total = 0;
        $('.checkbox').each(function (index, element) {
            if ($(this).prop('checked')) {
                total += parseInt($(this).val())
            }
        });
        $('#total').text(total)
    })
</script>