0

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

1 回答 1

0

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

onclick : checked=true

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

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

于 2013-09-05T12:54:15.590 回答