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

HTML Checkbox dynamically appended to list with JavaScript not working

本文关键字：JavaScript 不起作用 列表 复选框 动态 HTML      更新时间：2023-09-26

我没有使用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>

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

onclick : checked=true

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

其次，所有复选框都具有相同的ID。

相关文章：