使用javascript生成分组复选框JQuery mobile

时间:2012-10-23 10:34:52

标签: javascript jquery jquery-mobile

请检查此代码:http://jsfiddle.net/Hce8y/

我正在尝试生成一个分组复选框列表:

function ItemCode_Changed(sender, onload) {
$('#category-contianer-id-3').append(
        '<div data-role="fieldcontain">'
             + '<fieldset data-role="controlgroup">'
                + '<legend>Choose as many:</legend>'
                + '<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />'
                + '<label for="checkbox-1a">Cheetos</label>'
                + '<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />'
                + '<label for="checkbox-2a">Doritos</label>'                    
                + '<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />'
                + '<label for="checkbox-3a">Fritos</label>'
                + '<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />'
                + '<label for="checkbox-4a">Sun Chips</label>'
            + '</fieldset>'
        + '</div>');

$('#category-contianer-id-3 [data-role="fieldcontain"]').fieldcontain();
    $('#category-contianer-id-3 [data-role="fieldcontain"]').fieldcontain('refresh');

    $("#category-contianer-id-3 input[type='checkbox']").checkboxradio();
$("#category-contianer-id-3 input[type='checkbox']").checkboxradio('refresh');
//$('#my-home').page();

}

更改输入中的文本时,但结果看起来不像演示。

是否有任何错误,感谢任何帮助。

2 个答案:

答案 0 :(得分:0)

嘿,为什么你不把代码放在HTML中,当用户点击'Append Stuff'按钮时,div会出现?

<div id="category-contianer-id-3" style="display:none">
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Choose as many:</legend>
        <input type='checkbox' name='checkbox-1a' id='checkbox-1a' class='custom' />
        <label for='checkbox-1a'>Cheetos</label>
       <input type='checkbox' name='checkbox-2a' id='checkbox-2a' class='custom' />
        <label for='checkbox-2a'>Doritos</label>
    </fieldset>
</div>

并显示:

 $('#category-contianer-id-3').show();

查看我创建的演示,也许这对你有帮助。 http://jsfiddle.net/ZaZSa/1/

答案 1 :(得分:0)

你必须调用这两种方法:

$('input[type=checkbox]').checkboxradio();
$('fieldset').controlgroup();

更改其子元素后调用fieldcontain()不会改变任何内容。至少我没有看到任何差异。