如何顯示選中的復選框數據 jquery ajax

Question

我有文本框（用於實時搜索），每當我輸入超過 3 個字符時，結果就會通過 ajax 響應顯示（來自數據庫）作為帶有名稱的復選框，我只希望每當用戶 select 任何復選框時，此復選框應顯示在 div 中，以便用戶可以搜索多個數據並可以看到選中的復選框，我該怎么做？

現在這是我的 html 代碼

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <form action="/">
        <h1>Newsletter Form</h1>
        <p class="question">Newsletter Type?</p>
        <div class="question-answer">
          <label><input type="radio" value="Delas" name="DealType" /> Deals</label>
          <label><input type="radio" value="PremiumDeals" name="DealType" /> Premium Deals</label>
        </div>
        
        <div id="deals-section" style="display:none;">
        
        <p class="question">Add Merchant Name</p>
        <div class="question-answer">
          <input type="text" name="merchantname" id="merchantname" value="">
        </div>
        
        <div id="suggestions">
        <div id="suggestionslist">
        </div>
        </div>  
    
<img id="loading-image" src="<?php echo base_url(); ?>/assets/images/ajax-loader.gif" style="display:none;"/>   
        <table id="fees_table">
</table>
        <div class="form-group">
                        <label class="control-label col-xs-3"></label>
                        <div class="col-xs-8">
                            <ul id="sparepartList" style="list-style-type: none; padding: 0;"></ul>
                        </div>
          </div>
        <div class="btn-block" id="send" >
          <button type="submit" href="/">Send</button>
        </div>
        
        </div>
      </form>
  

這是我的腳本，它顯示帶有“復選框”的“MerchantName”（來自數據庫的數據），我只想每當我們單擊任何復選框時，這個“Merchant Data”應該顯示在單獨的 div/belowcheckbox 中，我該怎么做？

<script>
$('#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) 
                {
                    let li = $('<li><input type="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;
 }
});
</script>

  
  
  
  
  

Answer 1

您可以使用 jquery 獲取選中的復選框值。

$('input[type=checkbox]').on('change', function() {
    var val = this.checked ? this.value : '';
    $('#showDiv').html(val);
});