Checkbox select all

select-all.html

<script>
    // classes: input.select-all, input.select-item, .select-title
    document.addEventListener("DOMContentLoaded", function() {
        $('input.select-all').click(function(){
            var value = ($(this).prop('checked'));

            $('input.select-item').each(function(){
                $(this).prop('checked', value);
            })
        });

        // helper
        $('.select-title').click(function(){
           var checkbox = $(this).closest('tr').find('.select-item');
           checkbox.prop('checked', !(checkbox.prop('checked')));
        });

        $('#select-form').submit(function(e){
            //e.preventDefault();
            var items = [];
            $('input.select-item').each(function(){
                if ($(this).prop('checked')) {
                    items.push($(this).val());
                }
            });
            console.log('items', items);
            $('#selected-items').val(items);
            return true;
        });
    });
</script>
    <style>
        .select-title { cursor: pointer; }
    </style>


<form action="{{route('admin.geozones.attach.countries')}}"
      class="form-inline" id="select-form" method="post">
    {{csrf_field()}}
    <input type="hidden" id="selected-items" name="country_codes">
    <p>Select geozone for attaching the selected countries:</p>
    <div class="form-group">
        @if (\App\Geozone::count()>0)
            <select class="form-control" name="geozone_id">
                <option value="0">-</option>
                @foreach(\App\Geozone::all() as $geozone)
                    <option value="{{ $geozone->id }}">{{ $geozone->title }}</option>
                @endforeach()
            </select>
            <button type="submit" class="btn btn-default">Attach</button>
        @else
            No geozones is defined. <a href="{{route('admin.geozones.index')}}"
                                       target="_blank">Let's create some</a>.
        @endif
    </div>
</form>