Question

I have a JqMobile Code:-

http://jsfiddle.net/qgueS/

The thing i want to do is on checking the checkbox, display their respective label text in the <h3>Select</h3> above, for eg, if Bajaj Pulsar and Honda Shine are selected then display like this…

<h3>Bajaj Pulsar, Honda Shine,...</h3>

Can anyone help??

Answer 1

First, add id to div.

<div data-role="collapsible" data-content-theme="c" data-iconpos="right" id="foo">

Next, load js like this：

$(document).ready(function(){
    var h3_old = $('#foo h3 .ui-btn-text').text();
    $('#foo input').change(function(){
        var h3_new = new Array();
        $('#foo input:checked').each(function(){
            h3_new.push($(this).parent('div').find('.ui-btn-text').text());
        });
        if (h3_new.length > 0){
            $('#foo h3 .ui-btn-text').text(h3_new.join(', '));
        } else {
            $('#foo h3 .ui-btn-text').text(h3_old);
        }
    });
});​