Questions:
Here I want the checked names in another div within the same page with the help of jQuery. How can I do it?
<div class="w-100">
<h6 class="approval--name">
Name
</h6>
<p>Initiator</p>
</div>
<div class="form-group">
<div class="checkbox">
<input name="users" type="checkbox" value="1" id="1"/>
<label for="1"></label>
</div>
</div>
# I want checked names here
<div class="w-100">
<h6 class="approval--name">Checked Name</h6>
<p>Initiator</p>
</div>
How to&Answer:
This example below adds or removes the names if your checkbox is selected or not. Your checkbox element must have the attribute data-name with its name in it. I have added an ID to your div with the checked names in it, to identify it with jQuery.
$('input[type="checkbox"]').on('change', function() {
var name = $(this).attr('data-name');
if($(this).prop('checked')) {
$('#checked-names').append('<p data-name="' + name + '">' + name + '</p>');
} else {
$('#checked-names p[data-name="' + name + '"]').remove();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w-100">
<h6 class="approval--name">
Name
</h6>
<p>Initiator</p>
</div>
<div class="form-group">
<div class="checkbox">
<input data-name="Initiator" name="users" type="checkbox" value="1" id="1"/>
<label for="1">Initiator</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input data-name="Initiator2" name="users2" type="checkbox" value="2" id="2"/>
<label for="2">Initiator2</label>
</div>
</div>
# I want checked names here
<div id="checked-names" class="w-100">
<h6 class="approval--name">Checked Name</h6>
</div>Tags: html, jqueryjquery, list
