DEMO<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div>
<input type="text" id="text-input" />
</div>
<div>
<div>
<label>
<input type="checkbox" class="my-checkbox" value="1" />
First
</label>
</div>
<div>
<label>
<input type="checkbox" class="my-checkbox" value="2" />
Second
</label>
</div>
<div>
<label>
<input type="checkbox" class="my-checkbox" value="3" />
Third
</label>
</div>
</div>
</body>
</html>
jQuery(function($) {
var $text = $('#text-input'),
$box = $('.my-checkbox');
$box.on('click change', function() {
var values = [];
$box.filter(':checked').each(function() {
values.push(this.value);
});
$text.val(values.join(','));
});
});