How to get all names of checked checkboxes?

Question

At the end of my HTML site I want to show the name of all checked checkboxes.

For example, if I have following checkboxes:

<input type="checkbox" name="Product1" value="149"  id="checkbox_1" autocomplete="off"/>
<input type="checkbox" name="Product2" value="249"  id="checkbox_2" autocomplete="off"/>
<input type="checkbox" name="Product3" value="349"  id="checkbox_3" autocomplete="off"/>

The name of all the ones who are checked, should be listed on any position on the same page without pressing a button.

Like this, if he choosed 2 and 3:

You choosed following products:
Product2
Product3

If he choosed nothing, nothing should appear.

Answer 1

var names = $(':checkbox:checked').map(function(){ return this.name; });
if (names.length) {
    console.log(names.get().join(','));
}

It would be better if they had a shared class though, then you could make the selector better with

$('.theclass').filter(':checked').map(function(){ return this.name; });

 //demo example $(function(){ //get all the products var $allProducts = $('.product'); //get the area to write the results to var $selectedProductsListing = $('#selectedProducts'); //get the label var $selectedProductsLabel = $('#selectedProductsLabel'); //when you click a checkbox, do the logic $allProducts.on('click', function(){ //set the content of the results $selectedProductsListing.html( //only return those that are checked $allProducts.filter(':checked').map(function(index, checkbox){ //return a div string with the name for display return '<div>'+ checkbox.name +'</div>'; }).get().join('') //get the array of strings and join them by nothing ); //hide the label if no checkboxes are selected if ($selectedProductsListing.text().trim().length) { $selectedProductsLabel.show(); } else { $selectedProductsLabel.hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="Product1" value="149" class="product" id="checkbox_1" autocomplete="off"/> <input type="checkbox" name="Product2" value="249" class="product" id="checkbox_2" autocomplete="off"/> <input type="checkbox" name="Product3" value="349" class="product" id="checkbox_3" autocomplete="off"/> <div id="selectedProductsLabel" style="display:none">Products Selected:</div> <span id="selectedProducts"></span> 

Answer 2

you could check below snippet:

 $("input").click(function(){ var seList = $("input:checked").map(function(v){ return (this.name); }) $("#info").html(seList.join("<br>")) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <input type="checkbox" name="Product1" value="149" id="checkbox_1" autocomplete="off"/> <input type="checkbox" name="Product2" value="249" id="checkbox_2" autocomplete="off"/> <input type="checkbox" name="Product3" value="349" id="checkbox_3" autocomplete="off"/> <div id="info"> </div>