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

我正在嘗試進行自定義輸入，該輸入將在輸入中顯示多個選擇。我部分有它的工作，但我似乎無法弄清楚如何獲得多個值在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>

來源

2017-05-01 Paul

'變種typeVal = $（」下拉項輸入端。 '）VAL（）;'搜索第一' .drop -item-input'，但你需要當前的輸入，所以把它改爲'var typeVal = $（this）.val（）;' 然後在每個回調中連接所有的值：'typeVal + = $（this）.val （）' – rie

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

來源

2017-05-01 18:52:14 AE1

感謝您的幫助！任何想法，當看這個：https：//jsfiddle.net/p1jfojgr/2/ ...爲什麼個別值不是每個獲得藍色邊框？我試圖讓它看起來像標籤。 – Paul

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

來源

2017-05-01 19:39:16

在這裏你會得到逗號分隔值，你可以進一步處理。並取消選中該值重置爲選定的值。 –

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

回答

相關問題