Question: So I'm trying to load dynamic content straight into my checkbox container (group\_checkboxes)

```
<div id='group_checkboxes' data-role="fieldcontain">

</div>

```

This is the statement I'm running to populate the container:

```
$('#group_checkboxes').append('<fieldset data-role="controlgroup"><input type="checkbox" name="' + $(this).find('data').text() + '" class="custom" /><label for="' + $(this).find('data').text() + '">' + $(this).find('label').text() + '</label></fieldset>');

```

The checkboxes are all populated but the jQuery style is not applied.

According to the [docs](http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-checkboxes.html) all I need to do is call this function to update the checkbox style...

```
$("input[type='checkbox']").checkboxradio("refresh");

```

That doesn't work though... Any idea what I'm doing wrong?

Answer: 
When appending checkboxes or radio buttons to a *controlgroup* dynamically, you deal with two jQuery Mobile widgets, `.checkboxradio()` and `.controlgroup()`.

Both should be created/updated/enhanced/styled with jQuery Mobile CSS once new elements are added.

The way to achieve this is different in latest stable versions and RC version, but the methods are the same.

jQuery Mobile 1.2.x - 1.3.x (stable versions)
---------------------------------------------

After appending *checkbox* / *radio button* to either a static or dynamic *controlgroup*, `.checkboxradio()` should be called first to enhance *checkbox* / *radio button* markup and then `.controlgroup("refresh")` to re-style *controlgroup* div.

```
$("[type=checkbox]").checkboxradio();
$("[data-role=controlgroup]").controlgroup("refresh");

```

> 
> **[Demo](http://jsfiddle.net/Palestinian/2yjgg/)**
> 
> 
> 

---

jQuery Mobile 1.4.x
-------------------

The only difference here is elements should be appended to `.controlgroup("container")`

```
$("#foo").controlgroup("container").append(elements);

```

and then enhance both *controlgroup* and all elements within it, using `.enhanceWithin()`.

```
$("[data-role=controlgroup]").enhanceWithin().controlgroup("refresh");

```

> 
> **[Demo](http://jsfiddle.net/Palestinian/ertz6/)**
> 
> 
>
```
        <!DOCTYPE HTML>
    <html>
    <head>
        <title>checkbox</title>
        <link rel="stylesheet" href="jQuery/css/jquery.mobile-1.0a4.1.min.css" />
        <script type="text/javascript" src="jQuery/js/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="jQuery/js/jquery.mobile-1.0a4.1.min.js"></script>
        <script type="text/javascript">
             var myArray = [];
             $(document).ready(function() {
                // put all your jQuery goodness in here.
                myArray[myArray.length] = 'Item - 0';
                checkboxRefresh();
             });

             function checkboxRefresh(){
                var newhtml = "<fieldset data-role=\"controlgroup\">";
                newhtml +="<legend>Select items:</legend>" ;
                for(var i = 0 ; i < myArray.length; i++){
                    newhtml += "<input type=\"checkbox\" name=\"checkbox-"+i+"a\" id=\"checkbox-"+i+"a\" class=\"custom\" />" ;
                    newhtml += "<label for=\"checkbox-"+i+"a\">"+myArray[i]+"</label>";
                }
                newhtml +="</fieldset>";
                $("#checkboxItems").html(newhtml).page();

                //$('input').checkboxradio('disable');
                //$('input').checkboxradio('enable');
                //$('input').checkboxradio('refresh');
                //$('input:checkbox').checkboxradio('refresh');

                $("input[type='checkbox']").checkboxradio("refresh");

                $('#my-home').page();
             }

            $('#bAdd').live('click', function () {
                myArray[myArray.length] = 'Item - ' + myArray.length;
                checkboxRefresh();
            });
        </script>
    </head>
    <body>
    <div data-role="page" data-theme="b" id="my-home">
        <div id="my-homeheader">
            <h1 id="my-logo">checkbox</h1>
        </div>

        <div data-role="content">

            <div id="checkboxItems" data-role="fieldcontain"></div>

            <fieldset class="ui-grid-b">
                <div data-role="controlgroup" data-type="horizontal">
                    <a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a>
                </div>
            </fieldset>

        </div>
    </div>
    </body>
    </html>

```

It works just ones for me. Any idea why? 

The Answer for me is:

```
$("input[type='checkbox']").checkboxradio();

```