如何在AJAX加载复选框组中显示所有选中的值

Question

我checkbox列出ajax加载的内容，并且我想在用户选中每个复选框时显示页面中的选中值。请看下面的图片。

根据父选择，从ajax收听国家/地区和城市。这里有4个城市被选中，我想在复选框下方显示所有选定的城市值。

我在jquery代码下面使用过，但它不起作用。

$("#cites input[type='checkbox']").click(function(){
 var checkedc = $(this).val();
   $('#show_city').html(checkedc);
 });

Answer 1

使用.on()

您必须使用Event Delegation

语法

$( elements ).on( events, selector, data, handler );

像这样

$(document).on('change', '#cites input[type="checkbox"]',function () { //better use change event 
    if (this.checked) {// check if the checkbox is checked
        var checkedc = this.value;
        $('#show_city').html(checkedc);
    }
});

或

$('parentElementPresesntAtDOMready').on('click','#cites input[type="checkbox"]',function(){
   // code here
});

---

在OP的评论后更新

.map()

$(document).on('change', '#cites input[type="checkbox"]', function () {
    var checkedc = $('#cites input[type="checkbox"]:checked').map(function () {//use map to create array of checked elements
        return this.value;
    }).get().join(); //than join array with comma to string
    $('#show_city').html(checkedc);
});

Answer 2

我正在完成Tushar的答案，以便您获得所有已检查的城市：

$(document).on('change', '#cites input[type="checkbox"]',function () { //better use change event 
    var listChecked = "";
    if (this.checked) {// check if the checkbox is checked
        if (this.checked) {
            var value = $(this).val();
            listChecked = listChecked + value + ";";
        }
    }
    $('#show_city').html(listChecked);
});