Here’s an example of how you could do it. Live demo (click).
Markup:
<div id="inputs">
<input type="checkbox" value="Apple">
<input type="checkbox" value="Orange">
<input type="checkbox" value="Pineapple">
<input type="checkbox" value="Mango">
</div>
<ul id="results"></ul>
JavaScript:
$('#inputs input').change(function() {
$li = $('<li></li>');
$li.text(this.value);
$('#results').append($li);
});
If you want to remove items when they’re unchecked and prevent duplicates, you could do this: Live demo (click).
$('#inputs input').change(function() {
if (this.checked) {
$li = $('<li></li>');
$li.text(this.value);
$('#results').append($li);
}
else {
$('li:contains('+this.value+')', '#results').remove();
}
});
5
solved Display checkbox value in textbox in the order of click [closed]