werty1001,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by werty1001</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style type='text/css'>
.option {width:400px;overflow: hidden;border: 1px solid #eee;padding:10px;}
.checked {border-top: 1px solid #eee;padding:10px;background-color: #f9f9f9;}
.optgroup {border-bottom: 1px solid #eee;padding:10px;}
.checked > div {border-bottom: 1px solid #eee;padding:10px;}
</style>
<script type='text/javascript'>
$(function () {
$('.option').each(function () {
var b = $(this);
$('input[data-group]', b).change(function () {
var group = "div[data-group='" + $(this).data("group") + "']",
parent = $(this).parents('.checkbox'),
parents = $(this).parents(group),
$div = $(group, b),
$first = $div.eq(0),
$span = $('span', $first),
$div = $div.not(parents);
parent.appendTo($div);
$first.has('div').length ? $span.hide() : $span.show()
})
});
$('input[data-group]:checked').trigger('change')
});
</script>
</head>
<body>
<div class="option">
<div class="optgroup" data-group="apple">
<div class="checkbox"><label><input type="checkbox" data-group="apple" /> apple1</label></div>
<div class="checkbox"><label><input type="checkbox" data-group="apple" /> apple2</label></div>
<div class="checkbox"><label><input type="checkbox" data-group="apple" checked /> apple3</label></div>
<span class="nooptgroup" style="display:none;">Выбраны все возможные варианты.</span>
</div>
<div class="optgroup" data-group="samsung">
<div class="checkbox"><label><input type="checkbox" data-group="samsung" checked /> samsung1</label></div>
<div class="checkbox"><label><input type="checkbox" data-group="samsung" /> samsung2</label></div>
<div class="checkbox"><label><input type="checkbox" data-group="samsung" /> samsung3</label></div>
<div class="checkbox"><label><input type="checkbox" data-group="samsung" /> samsung4</label></div>
<span class="nooptgroup" style="display:none;">Выбраны все возможные варианты.</span>
</div>
<div class="checked"> <i>Выбранные</i>
<div data-group="apple"><i>Яблоко</i></div>
<div data-group="samsung"><i>Корейцы</i></div>
</div>
</div>
</body>
</html>
