jquery - 如何通过 ID 和名称数组在 Jquery Mobile 中多选复选框或 ListView

标签 jquery jquery-mobile

我正在 Jquery Mobile 中进行开发,我想显示人员列表,并从中选择一些人并将其保存到数据库中。我将如何显示具有多项选择的列表?

最佳答案

这是一个小例子。

<!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>

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

如果有帮助请告诉我

关于jquery - 如何通过 ID 和名称数组在 Jquery Mobile 中多选复选框或 ListView ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8767714/

相关文章:

javascript - Jquery移动链式弹出动态定位

javascript - jQuery 表单标签上的 for 属性

javascript - 如何在页面完全加载完成后运行跟踪脚本?

javascript - 为什么 Backbone.Collection 对第一个查看者显示两次?

java - Android PhoneGap 与 jQuery mobile html5 嵌入 flash

javascript - 如何使用 jQuery UI 删除 jQuery 移动效果?

javascript - Phonegap 和 jQuery Mobile 架构问题

jQuery.find() 忽略根节点

javascript - 如何在 html5 网络应用程序中禁用 android 后退按钮单击

javascript - Rails : file nested fields, 显示在每个字段上选择的文件的名称