Как вывести отмеченные элементы (:checked)?

Question

[Алексей Николаев]

Есть список из элементов с чекбоксами. Нужно в соседнем блоке выводить отмеченные элементы.
Как лучше всего это сделать? Т.е. выбрали первый чекбокс, в другом блоке(.vybrano) показывается что он выбран. Также в блоке выбранных нужно добавить, например крестик, при нажатии на который, отмеченный элементы обратно возвращается в неактивное состояние.
https://jsfiddle.net/rqndzpb0/

Comments

[Decadal]

возвращаются в неактивное состояние - что это значит? удаляются из .vybrano или остаются в .vybrano, но с соответствующего чекбокса слетает галочка?

[Алексей Николаев]

удаляются из .vybrano и с соответствующего чекбокса слетает галочка?

Answer 1

[coderisimo]

вот вам грубый набросок - здесь при клике на чекбоксах в другом блоке добавляется элемент, если чек бокс снимаете - элемент в другом блоке убирается, ну, и если кликаете на элемент в другом блоке, то он удаляется и чекбокс этого элемента снимается

<div class="spisok">
          <ul>
                    <li>
          <label for="value-1">
          <span><input type="checkbox" class='checkbox' id="value-1" value="1"></span>
          <span>опция 1</span>
                      </label>
          </li>
                    <li>
          <label for="value-2">
          <span><input type="checkbox" class='checkbox' id="value-2" value="2"></span>
          <span>опция 2</span>
                      </label>
          </li> 
          <li>
          <label for="value-3">
          <span><input type="checkbox" class='checkbox' id="value-3" value="3"></span>
          <span>опция 3</span>
                      </label>
          </li>
                    </ul>
          </div>
          
<div class="vybrano">
          здесь должны показываться отмеченные значения чекбоксов
          </div>

$('.checkbox').click(function(){
var el = $(this);
if(el.prop('checked')){
$('.vybrano').append('<div class="added" valu="'+el.val()+'">'+ el.val()+'-remove</div>');
}
else{
$('[valu="'+ el.val()+ '"]').remove();
}
});


$('body').on ('click' , '.added' , function(){
var el = $(this);
var id = '#value-' + el.attr('valu');
el.remove();
$(id).prop('checked' ,  false);
});