Find and display in a div all checked checkboxes titles using a button [closed]

Question

I have a huge form with many check-boxes. In a specific area I am displaying a total amount that occurs from the values of the checked check-boxes. I would like to display all the titles or alt of the checked check-boxes as well in a specific area (div) below my total amount. preferably with JQuery.

[SOLVED] This is what I expected.. Finally solved:

$("input[type='checkbox']:checked").each(function(){
var checkAltValue = $(this).attr("value");
$('div#WHATEVER_DIV_ID').append(checkAltValue)
});

You can find better alternatives below as well. Thanks guys for the fiddle examples..

Answer 1

It would just be a case of listening on the .click() event, and then when invoked, find all checked checkboxes and add to the div. Example below:

Demo

$(document).ready(function(){
    $('#myButton').click(function(){
        var checked = $('#checked');
        checked.children().remove();
        $('input[type=checkbox]:checked').each(function(){
            checked.append($(document.createElement('li')).text($(this).attr('title')));
        });
    });
});

Answer 2

Add the below code to your button click handler to get the values of all the checked boxes:

$("input[type='checkbox']:checked").each(function(){
    var checkAltValue = $(this).prop("alt");
    //other code here
});

Answer 3

Here is a working fiddle that should help

and here is the code -

$(function(){
   $('#test').click(function(){ //#test being the id of the button you want to click

      var allTitles = $(':checkbox:checked').map(function(){ 
         return this.alt 
      }).get().join();

   $('#myDiv').html(allTitles);
});

Answer 4

You could check all checkboxes on your form by doing so :

$("input[type=checkbox][checked]").each( 
    function() { 
       // Insert code here 
    } 
);