jQuery Mobile - synchronize checkboxes

Question

I am trying to synchronize two checkboxes one from Landscape view and another for Portrait view

I am using jquery mobile and HTML 5, is there any way to do it without using jquery code ?

Strangelly it works if we have inputs with the same id, what I know is not correct. With two labels and one input the design of the first option looks strange.

Please, find the jsfiddle.

Answer 1

I don't think there is automatic synchronization, however it is pretty easy to do with jQuery:

<div class="portrait">            
    <label><input type="checkbox" id="chk-p" />Check me</label>
</div>       
<div class="landscape">            
    <label><input type="checkbox" id="chk-l" />Check me</label>
</div>

Given the 2 checkboxes, handle the change event on each one and update the other:

$("#chk-p").on("change", function(e){
     $("#chk-l").prop("checked", this.checked).checkboxradio("refresh");
});

$("#chk-l").on("change", function(e){
    $("#chk-p").prop("checked", this.checked).checkboxradio("refresh");
});

Make sure and call .checkboxradio("refresh") after changing checkbox value in order to update the jQM widget.

DEMO