Question

I have the following code written

$(xml).find('list').each(function() {
  $("#content_groups ul").append("<li><a href='#membergroup' onclick='functionare(\"" + $(this).attr("name") + "\")'>" + $(this).attr('name') + "</a><input type='checkbox' name='checkbox-0' id='checkbox-mini-0' class='custom' data-mini='true' /></li>");
});
$("#content_groups ul").listview('refresh');

The result is not as I wished, namely the checkbox has no jquery css style at all. Can you please tell me what’s the problem?

That’s how the result looks:

I’m basically new to all what’s jquery/javascript and I need it for my project only to display some results from an xml.

Answer 1

First few things to consider.

$("#content_groups ul").listview('refresh');

will only style your list view and nothing more.

To style a check box you need to use a appropriate function like this one:

$("#checkbox-mini-0").checkboxradio('refresh');

Unfortunately this is not going to help you because jQuery Mobile can not style normal check box elements. If you use a standard check box your final result will be a normal check box.

jQuery Mobile check box looks like this:

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
            <legend>Agree to the terms:</legend>
            <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
            <label for="checkbox-1">I agree</label>
    </fieldset>
</div>

You can use this code and insert it into your listview li element (of course you still need to style it with .checkboxradio(‘refresh’);) but this still is not going to help you because jQuery Mobile check box is never meant to bu used inside listview.

But you can create a custom check box inside a listview and here’s my example how you can do that: https://stackoverflow.com/a/13634738/1848600