jquery モバイルでは、製品用に別のページを作成しました。phonegap を使用して、ローカル Sq-lite データベースのクエリから動的にロードされます。以下のコーディングは正常に機能し、チェックボックスを使用して製品のリストを表示します。しかし、1 つのチェック ボックスをクリックすると、すべてのチェック ボックスが選択されます。また、いくつかのネイティブ チェック ボックスが画面に表示されます。このチェックボックスリストを適切に表示し、送信時にチェックボックスの値を取得するにはどうすればよいですか?
$('#productspage').live('pageinit',function(event){
loadProducts();
});
// Load Products for Products page
function loadProducts()
{
var db=window.openDatabase("salesorder", "1.0", "SalesOrder", 1048576);
if(db!=null)
{
db.transaction(queryProductsTable, errorPT);
}
else
{
alert("table not exists");
}
}
function queryProductsTable(tx)
{
tx.executeSql('SELECT * FROM products', [], queryProductsSuccess, errorPT);
}
function errorPT(err) {
alert("Error processing SQL: "+err.code);
}
//Query products and append to products_list
function queryProductsSuccess(tx, results) {
var len = results.rows.length;
$("#products_list").empty();
for (var i=0; i<len; i++){
var product_id=results.rows.item(i).productid; // Returns null
var product_name=results.rows.item(i).productname;
var product_price=results.rows.item(i).unit_price;
var product_stock=results.rows.item(i).qtyinstock;
$("#products_list").append("<input type='checkbox' name='products_check' id='"+product_id+"' value='"+product_name+"' price='"+product_price+"' stock='"+product_stock+"' class='custom'><label for='"+product_id+"'>"+product_name+"</label>");
}
$("#products_list").trigger("create");
}