How to pass multiple flag values ​​to an array

Question

I am trying to pass values ​​from a list of checkboxes when selecting a jquery function, so I can play with the selected values. Below code does not work

I want to be able to use the value outside the checkbox function

So, for example, if I had another button outside this function, it would have to read what was stored in the array. The code below does not work for any reason, any help would be appreciated

jquery

 <script>
    $(document).ready(function(){

    var vals = []
    $('input:checkbox[name="check[]"]').each(function() {
        if (this.checked) {
            vals.push(this.value);
        }
    });

     alert(vals[0]);
    });
    </script>

HTML code

<form>
<input value="BOOZE" type="checkbox" name="check[]" >PUB, MATES, <br>
<input value="TV"  type="checkbox" name="check[]">BRIBING THE KIDS TO GO BED<br>
<input value="BOOZE" type="checkbox" name="check[]">RAVING TILL THE EARLY HOURS<br>
<input value="PETS"  type="checkbox" name="check[]">PLAYING GRAND THEFT AUTO <br>
<input value="GEEK"  type="checkbox" name="check[]">TWEETING ABOUT SOMETHING <br>
<input value="SPORT"  type="checkbox" name="check[]">GYM<br>
<input value="XMAS"  type="checkbox" name="check[]">SINGING CHRISTMAS SONGS<br>
<input type="checkbox" class="chkNumber" name="check[]">SHARING A DELIGHTFUL BOTTLE 
</form> 

Answer 1

You must have a change handler in which you need to filter the checked checkbox items

 var vals = [];
 $(document).ready(function () {

     var $checkes = $('input:checkbox[name="check[]"]').change(function () {
         vals = $checkes.filter(':checked').map(function () {
             return this.value;
         }).get();

         alert(JSON.stringify(vals));
     });
 });

Demo: Fiddle

Answer 2

, .map(), :

var vals = $('input:checkbox[name="check[]"]:checked').map(function () {
    return this.value;
}).get();

alert(vals[0]);

Answer 3

,

var vals = [];

$(document).ready();

like

<script>
var vals = [];
$(document).ready(function(){
$('input:checkbox[name="check[]"]').each(function() {
    if (this.checked) {
        vals.push(this.value);
    }
});

 alert(vals[0]);
});
</script>