如何從文本輸入中的複選框選擇中獲取值

Question

我正在嘗試進行自定義輸入，該輸入將在輸入中顯示多個選擇。我部分有它的工作，但我似乎無法弄清楚如何獲得多個值在proposal-type輸入顯示。無論我選擇什麼，它只顯示A的值。然後，如果選擇了多個選項，則不會顯示。

有沒有人看到我做錯了什麼？

Here is a fiddle.

$('#proposal-type').click(function() { 
 
    $('#proposal-type-drop').addClass('active'); 
 
}); 
 
$('.drop-item-input').on('change', function() { 
 
    var typeVal = $('.drop-item-input').val(); 
 
    $('.drop-item-input').each(function() { 
 
    if ($(this).is(":checked")) { 
 
     console.log(typeVal); 
 
     $('#proposal-type').val(typeVal).text(typeVal); 
 
    }; 
 
    }); 
 
});

#proposal-type-drop { 
 
\t width: 45%; 
 
\t display: none; 
 
\t position: absolute; 
 
} 
 
#proposal-type-drop.active { 
 
\t background: rgba(0,0,0,1); 
 
\t display: block; 
 
\t height: auto; 
 
\t z-index: 1; 
 
} 
 
.drop-item { 
 
\t color: #FFF; 
 
\t font-size: .9rem; 
 
\t padding: 5px; 
 
\t background: #000; 
 
\t display: block; 
 
\t width: 100%; 
 
\t cursor: pointer; 
 
} 
 
.drop-item-input { 
 
\t display: none; 
 
} 
 
.proposal-text { 
 
\t width: 95%; 
 
\t display: block; 
 
\t height: 6em; 
 
\t margin: 1.5% 2% 2.5% 2%; !important 
 
} 
 
#proposal-check { 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="panel-input"> 
 
    <input type="text" id="proposal-type" name="proposal_type" class="proposal-input" placeholder="Selection"> 
 
    <div id="proposal-type-drop"> 
 
    <label class="drop-item">A<input type="checkbox" class="drop-item-input" value="A"></label> 
 
    <label class="drop-item">B<input type="checkbox" class="drop-item-input" value="B"></label> 
 
    <label class="drop-item">C<input type="checkbox" class="drop-item-input" value="C"></label> 
 
    </div> 
 
</div>

Answer 1

$('.drop-item-input').on('change', function() { 
    var proposalVal = ""; 
    $('.drop-item-input').each(function() { 
    if ($(this).is(":checked")) { 
    proposalVal += $(this).val();  
    }; 
    $('#proposal-type').val(proposalVal).text(proposalVal); 
    $('#proposal-type-drop').removeClass('active'); 
    }); 
}); 

Answer 2

$('#proposal-type').click(function() 
{ 
    $('#proposal-type-drop').addClass('active'); 
}); 
$('.drop-item').click(function() 
{ 
    var seleVal = []; 
    $('.drop-item-input').each(function() 
    { 
     if ($(this).is(':checked')) 
     { 
      seleVal.push($(this).val()); 
     } 
    }) 
    $('#proposal-type').val(seleVal.join(',')); 
});