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

我已经列出了通过

ajax

加载的

checkbox

列表，我想在用户选中每个复选框时在页面中显示选中的值。请看下图。

根据家长选择，从

ajax

中收听国家/地区和城市负载。这里有4个城市被选中，我想在复选框下面显示所有选中的城市值

我使用了下面的jquery代码，但它不起作用

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

使用

你必须使用

语法

$( 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);
    }
});

或

---

在OP的评论后更新

---

我正在填写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);
});

---

谢谢，这很有效，因为它没有加载我检查过的所有引用。这是最后一次检查的城市。是否需要任何

append

方法？@miuranga append将产生问题，好像取消选中元素一样，如何删除它？所以最好使用更新的答案。

$(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);
});

$(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);
});