bootstrap toggle - value change and array generation

Hi trying to use bootstrap-toggle plugin in one of my personal project. It's all nice and pretty and work as advertised, except that it doesn't.

What I mean by that is that the animation works fine but the underlying input does not change/toggle the state change.

So here's my code:

        <div class="checkbox">
        <label>
        <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="1">mango
        </label>
        </div>
        <div class="checkbox">
        <label>
        <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="2">strawberries
        </label>
        </div>
        <div class="checkbox">
        <label>
        <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="3">tangerine
        </label>
        </div>
        <div class="checkbox">
        <label>
        <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="4">peach
        </label>
        </div>
        <div class="checkbox">
        <label>
<input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="5">pineapple
        </label>
        </div>

what I need to do is on click toggle the underlying checkbox "checked" attribute, and then get all checked checkboxes and put them into array for ajax actioning. I would imagine it to be as simple as:

$('element').on('click',function(){
var arr = [];
    $('.filter-toggle input[type="checkbox"]:checked').each(function(){
     arr.push($(this).val());
    });
});

obviously it's not or I wouldn't be here and the official documentation and examples are not helpfull at all.

So in brief, using bootstrap-toggle plugin, how do I check/uncheck the underlying checkboxes and get values into js array?

Thanks