如何从文本输入中的复选框选择中获取值

我正在尝试进行自定义输入，该输入将在输入中显示多个选择。我部分有它的工作，但我似乎无法弄清楚如何获得多个值在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

在这里你会得到逗号分隔值，你可以进一步处理。并取消选中该值重置为选定的值。 –

如何从文本输入中的复选框选择中获取值

回答

相关问题