如何通过jQuery+Ajax实现选中checkbox数据的展示功能

第一步：新增已选商户展示容器 #

在你的HTML代码中，添加一个独立的div用来展示已勾选的商户，建议放在#sparepartList所在的表单组下方即可：

<!-- 已选商户展示区域 -->
<div class="form-group">
  <label class="control-label col-xs-3">已选商户</label>
  <div class="col-xs-8" id="selected-merchants" style="padding: 10px; border: 1px solid #e5e5e5; min-height: 40px;">
  </div>
</div>

第二步：修改JS逻辑，添加checkbox勾选监听 #

因为你的checkbox是AJAX请求后动态生成的，所以需要用事件委托的方式绑定监听事件，避免动态生成的元素无法触发事件。修改后的完整JS代码如下：

$('#merchantname').keyup(function() {
  var merchantname = $(this).val();
  if(merchantname.length >= 3){
    $.ajax({
      type: 'POST',
      url: "<?php echo base_url('Newsletter/GetMerchantName');?>",
      cache : false,
      data: {'merchantname': merchantname},
      dataType: "json",
      async: false,
      beforeSend: function() {
        $("#loading-image").show();
      },   
      success: function(response) {
        $('#sparepartList').empty();
        $.each(response, function(key,value) {
          // 给checkbox加自定义类方便选择
          let li = $('<li><input type="checkbox" class="merchant-checkbox" name="merchantName[]" value="' + value.merchantName + '" />' +
                      '<input type="text" name="sparepart" value="' + value.merchantName + '" /></li>');
          $('#sparepartList').append(li);
        });
        $("#loading-image").hide();
      },
      error: function(response) {
        console.log(response);
      } 
    })
    return false;
  }
});

// 事件委托监听checkbox勾选状态变化
$(document).on('change', '.merchant-checkbox', function() {
  const merchantName = $(this).val();
  const isChecked = $(this).is(':checked');
  const selectedContainer = $('#selected-merchants');
  
  if (isChecked) {
    // 勾选时添加到已选区域，避免重复添加
    if (selectedContainer.find(`[data-merchant="${merchantName}"]`).length === 0) {
      const merchantItem = `<span data-merchant="${merchantName}" style="display: inline-block; margin: 0 8px 5px 0; padding: 3px 8px; background: #f0f0f0; border-radius: 4px;">${merchantName}</span>`;
      selectedContainer.append(merchantItem);
    }
  } else {
    // 取消勾选时从已选区域移除对应项
    selectedContainer.find(`[data-merchant="${merchantName}"]`).remove();
  }
});

可选调整说明 #

• 如果需要展示在对应checkbox下方而不是独立区域，可以把勾选后的插入逻辑改成往当前checkbox所在的li后面插入展示项，取消时删除对应的后续节点即可
• 已选区域的样式可以根据你的页面设计自行调整，比如加删除按钮、修改背景色等

内容的提问来源于stack exchange，提问作者Ritika