动态附加到列表的 HTML 复选框，但 JavaScript 不起作用答案

【问题标题】：HTML Checkbox dynamically appended to list with JavaScript not working动态附加到列表的 HTML 复选框，但 JavaScript 不起作用
【发布时间】：2013-09-09 07:21:07
【问题描述】：

我没有使用 jquery、javascript 和 HTML 来创建产品列表，我现在尝试做的任务是能够从列表中选择多个。

到目前为止，我有一个 HTML 列表，我可以通过 javascript 动态添加列表中每个所需的 <li>。问题是，复选框根本没有检查。更奇怪的是，如果我非常快速地多次单击一个复选框，它会检查。一旦复选框起作用，我希望添加的另一个功能是，如果单击列表项，它会自动检查与该列表相关的复选框。有人介意帮我解决这些问题吗？谢谢，这是我的代码：

HTML

<!DOCTYPE html>

<head>
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <!--Progress Bar Scripts-->
</head>

<body>
    <div data-role="page" id="searchProducts" data-theme="b">
        <div data-role="header" data-position="inline"> <a onclick="" data-icon="back">Back</a>

             <h1>Search Products</h1>

        </div>
        <div data-role="content">
            <div data-role="fieldcontain">
                <label for="name">Product:</label>
                <form action="javascript:searchProducts('denim')">
                    <input type="search" name="searchboxProd" id="searchboxProd" value="denim" />
                    <!--<a href="#" data-role="button" style="width: 200px">Search</a>-->
                </form>
                <ul id="ProductsFound" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
                    <li data-role="list-divider">Products Found</li>
                </ul>
            </div>
            <div id="prodList"></div>
        </div>
    </div>
</body>

JavaScript

function searchProducts(prod) {
for (var i = 1; i < 6; i++) {
    $('#ProductsFound').append($('<li/>').append($('<a/>', {
        //'href': '#prod',
        //'onclick': 'selectProduct(' + i + ') ',
    }).append($('<fieldset/>', {
        'data-role': 'controlgroup'
    }).append($('<input/>', {
        'type': 'checkbox',
            'id': 'checkbox-2b',
            'data-theme': 'c',
            'onclick': 'checked=true'
    })).append($('<label/>', {
        'for': 'checkbox-2b'

    }).append($('<label/>', {
        'text': '    Denim ' + i
    }))))));
}
$('#ProductsFound').listview('refresh');

}

一些<li> 产生的 (ProductsFound.innerHTML)

<script>\n                    
</script>\n                
<li>
<a>
<fieldset data-role=\"controlgroup\">
    <input id=\"checkbox-2b1\" onclick=\"checked=true\" type=\"checkbox\" data-theme=\"c\">

    <label for=\"checkbox-2b\">
        <label>    Denim 1</label>
    </label>
</fieldset>
</a>
</li>

【问题讨论】：

HTML 部分中唯一真正相关的代码是<ul id="ProductsFound" ...>...</ul>。更有趣的 HTML 将是一些生成的<li>s。
我将如何查看这些内容？抱歉，我不熟悉 javascript 等
@PaulS。这里是一些生成的innerHTML \n
Denim 1 字段集>

【解决方案1】：

我通过小提琴运行它，我遇到了与你相反的问题。我可以检查它们，但因为你有

onclick : checked=true

如果您确实选中它，则复选框永远不会取消选中

其次，所有复选框都有相同的 ID。大禁忌。

【讨论】：

哎呀，没注意到那个 id 的东西。
好的，现在更改为所有唯一的 id 并取出checked=true 的东西。还是不行
您是如何设法让该代码在 jsfiddle 上运行的？我试过了，但列表中不会出现任何内容
我尝试将该代码放入我的 jsfiddle 中，但我得到的不是复选框和标签，而是文本框！我也复制粘贴了
硬编码一个li，它工作正常，jquery mobile可能是动态html的问题