How to display checked items (:checked)?

Question

How to display checked items (:checked)?

There is a list of items with checkboxes. Need a nearby unit to display the selected elements.
How best to do this? I.e. chose the first checkbox, and in another block(.vybrano) shows that it is selected. Also in the box is selected to add for example a cross, clicking on which the selected elements is returned back to the inactive state.
https://jsfiddle.net/rqndzpb0/

jQuery

Larissa.Ste asked July 12th 19 at 17:07

Related questions

More answers about "How to display checked items (:checked)?"

1 answer

eryn.Kunze9 answered on · Answer 1 · 2019-07-12T17:09:15.158Z

here's the rough sketch here by clicking on the checkboxes in another block is added to the element if the check box is removed - the item in another block is removed, well, if you click on an element in another block, it is removed and the checkbox of this element is removed

<div class="spisok">
the <ul>
the <li>
 <label for="value-1">
 <span><input type="checkbox" class="checkbox" id="value-1" value="1"></span>
 <span>option 1</span>
</label>
</li>
the <li>
 <label for="value-2">
 <span><input type="checkbox" class="checkbox" id="value-2" value="2"></span>
 <span>option 2</span>
</label>
 </li> 
the <li>
 <label for="value-3">
 <span><input type="checkbox" class="checkbox" id="value-3" value="3"></span>
 <span>option 3</span>
</label>
</li>
</ul>
</div>

<div class="vybrano">
 here should be noted the values of the checkboxes
 </div>

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


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