Change dynamically value of flipswitch jquery

i would like to change the value of a flipswitch dynamically but it doesn't work.

<div id="header-connection-icon">
  <input type="checkbox" data-mini="true" 
     data-role="flipswitch" name="flip-checkbox-1" id="flip1">
</div>
<div>
  <button id="test">change value</button>
</div>

$('#test').on('click', function () {
   $('#flip1').val('on');
   $('#flip1').flipswitch("refresh")
});

I created a jsfiddle:JSFIDDLE

I'm using the latest jquery mobile and jquery plugins.

thx

The problem is that your input is a checkbox, so you need to 'Check' it :)

$('#test').on('click', function(){
    $('#flip1').attr('checked','checked');
    $('#flip1').flipswitch( "refresh" )
  });

FIDDLE