从servlet响应生成动态复选框值

Question

我将来自servlet响应中的数据库的值作为id和name;我将它存储在servlet中的Map key-value中。

我现在想创建一个JSP代码，生成一个复选框并显示动态值列表。

Servlet代码

String sql = "SELECT customerid , c_name from customer";
ResultSet rs = s.executeQuery(sql);
Map<String, String> options = new LinkedHashMap<String, String>();

while (rs.next()) {
options.put(rs.getString("customerid"), rs.getString("c_name");
}

String json = new Gson().toJson(options);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);

JSP代码 -

$(document).ready(function () {                           
    $('.btn-checkbox').click(function () {      
    $.get('dataservlet', function (responseJson) {
    var $input = $('#id1');
    var $type = 'checkbox';
        $.each(responseJson, function (key, value) {              
        $('$type').val(key).text(value).appendTo($input); 
    });
    });
});

//JQuery is not generating the right checkboxes, even when the response is in, need help in forming the correct JQuery.

HTML代码 -

div id="id1"></div>

例如 -

我有一个记录 -

customerid c_name
5000       name1

我需要一个复选框来生成：

<input type ="checkbox" id'5000"/>name1 

//所以这里key是 id 而value是 name1

我需要一个带有值的复选框，如下图所示 -

更新

Answer 1

你这样做完全错了。使用以下行。的 Demo Fiddle

var append = $('<input type="'+$type+'">'+value+'</input>').attr('id',key).val(value);

$($input).append('<br/>').append(append);

• $type不能用作字符串 - $('$type')
• key是您的ID - 因此您无法使用.val()。
来使用它
• 为什么要将其附加到输入中，您应在输入后插入新的复选框 - .after() 。
• 您忘记以$(document).ready()结束});。
• 使用.change()而不是.click()输入。

所以你最后的JS：

$(document).ready(function () {                           
    $('.btn-checkbox').change(function () {      
        $.get('dataservlet', function (responseJson) {
            var $input = $('#id1');
            var $type = 'checkbox';
            $.each(responseJson, function (key, value) {              
               var append = $('<input type="'+$type+'">'+value+'</input>').attr('id',key).val(value);
               $($input).append('<br/>').append(append); 
            });
        });
    });
});