Question

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

Answer 1

我通过一个小提琴跑了，我遇到了相反的问题。我可以查看它们，但因为你有

onclick : checked=true

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

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

HTML Checkbox动态附加到列表，JavaScript无法正常工作

1 个答案: