如何通过ID和名称数组在Jquery Mobile中进行多选Checkbox或Listview

Question

如何通过ID和名称数组在Jquery Mobile中进行多选Checkbox或Listview

我在Jquery Mobile开发,我想显示人员列表,我想要选择一些人并将其保存到数据库.我将如何显示具有多个选择的列表？

Answer 1

这是一个小例子.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    <script>
        var array = [{ name: "John", value: "1"}, { name: "Alex", value: "2"},{ name: "John2", value: "3"}, { name: "Alex2", value: "4"}];

        function createCheckboxes(){
         $("#createBtn").remove();
         $("#content").append('<fieldset id="cbFieldSet" data-role="controlgroup">');
         var length = array.length;
         for(var i=0;i<length;i++){
            $("#cbFieldSet").append('<input type="checkbox" name="cb-'+i+'" id="cb-'+i+'" value="'+array[i].name+'"/><label for="cb-'+i+'">'+array[i].name+'</label>');
         }

         $("#content").trigger("create");
         $("#showBtn").css("visibility","visible");
        }

        function showSelectedNames(){
            var count = $("#cbFieldSet input:checked").length;
            var str = '';
            for(i=0;i<count;i++){
                str += ' '+$("#cbFieldSet input:checked")[i].value;
            }
            alert("You selected----"+str);
        }
    </script>
</head> 
<body> 

<div data-role="page" id="page1">

    <div data-role="header">
        <h1>Page1</h1>
    </div><!-- /header -->

    <div data-role="content" id="content">    
        <a id="createBtn" data-role="button" onclick="createCheckboxes()">Create checkbox list from array</a>
        <a id="showBtn" data-role="button" onclick="showSelectedNames()" style="visibility:hidden">Alert selected names</a>     
    </div><!-- /content -->

</div><!-- /page -->

 </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这里有一个演示 - http://jsfiddle.net/DqqK8/

如果有帮助,请告诉我

归档时间：	14 年，1 月前
查看次数：	8317 次
最近记录：	13 年，2 月前