Topcoat switch component and selected. Best way to get event and states on or off?

Question

I'm building my first phonegap app and i'm using topcoat as beautifier (pure css) demopage. Topcoat is great for mobile apps because everything is css based (hardware accelerated) and this is (btw) the way to go when building with phonegap. However because everything is css based there is no javascript to help you manipulating/reading the dom state. This is no problem for most topcoat-components (like clicking a button or typing some text in an input). However, the on/off Switch-component is in fact a fancy html checkbox, when you click it it switches on or off with a css-transition. Very nice but the checkbox itself doesn't update (bug in Topcoat?). I came with a solution that works but I wonder if this is the way to go and why I can't using the recommended jquery's prop() method?

jsfiddle DEMO

<label class="topcoat-switch">
   <input id="testcheck" type="checkbox"  name="testd" class="topcoat-switch__input">
   <div class="topcoat-switch__toggle"></div>
</label>



$('#testcheck').change(function(){
    var el=$(this);
    el.attr("checked", !el.attr("checked"));

    alert(el.attr("checked")?'callback true':'callback false');
});

Answer 1

You don't need to set the checked status by code, it will handle by the css

check this

$('#testcheck').change(function(){
    $('#status').html(this.checked?'callback true':'callback false');
});