Question

I have these checkboxes on a page and on another page I have these same checkboxes.

            <div data-role="content" data-theme="a">    
        <h2>Kies categorieen</h2>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <input type="checkbox" name="categorie-kijk" id="goedkoop-bier-kijk" class="custom" />
                <label for="goedkoop-bier-kijk">Goedkoop bier</label>
                <input type="checkbox" name="categorie-kijk" id="muziek-kijk" class="custom" />
                <label for="muziek-kijk">Muziek</label>
                <input type="checkbox" name="categorie-kijk" id="gezelligheid-kijk" class="custom" />
                <label for="gezelligheid-kijk">Gezelligheid</label>
            </fieldset>
        </div>
        <p><a href="#bekijken2" data-direction="reverse" data-role="button" data-theme="b">Toon</a></p> 

    </div>

Now I want to save the checked values of the page below to influence the values of the page above. When the user clicks the button ‘Opslaan’ below, it should save which checkboxes are checked and only show those in the page above.
So, for example, if only the checkbox with id “gezelligheid-fav” was checked and saved, the page above should only show the checkbox “gezelligheid-kijk”.

    <div data-role="content" data-theme="d">    
        <h2>Selecteer favorieten</h2>   
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <input type="checkbox" name="categorie-fav" id="goedkoop-bier-fav" class="custom" />
                <label for="goedkoop-bier-fav">Goedkoop bier</label>
                <input type="checkbox" name="categorie-fav" id="muziek-fav" class="custom" />
                <label for="muziek-fav">Muziek</label>
                <input type="checkbox" name="categorie-fav" id="gezelligheid-fav" class="custom" />
                <label for="gezelligheid-fav">Gezelligheid</label>
            </fieldset>
        </div>
        <p><a href="#instellingen" data-role="button" data-inline="true" data-icon="back">Opslaan</a></p>   
    </div>

Does anyone know how I should do this?

Answer 1

Assueming that two groups have same number of checkboxs and in the same order,
using jQuery, bind the click event on the ‘Opslaan’ button with this handler:

function() {
    var cbxs1 = $('input[name="categorie-fav"]'),
        cbxs2 = $('input[name="categorie-kijk"]');
    cbxs1.each(function(index) {
        cbxs2[index].checked = this.checked;
    });
}