get a list of selected checkboxes using Jquery

check this one

function showSelectedCheckboxes()
{
    var list = $('#IDList').data('value');
    $(".myCheckboxClass:checkbox").change(function() {
        list.push( $(this).val());
        $(this).closest("div").clone().appendTo("#selectedListSelected");
    });
    $("#IDList").val(list);
}

Seems related to other posts.

well the problem is when i check 1 checkbox all the checkboxes get clonned and I only need need the one that checked

So what is wrong with my suggestion in the other question and why do you repeat the question?

I suggested you get all checkboxes and replace the content with the checked ones each time

well there was no answer to that question. I will be deleteting old question.

All I need to copy is the text that comes after a checkbox . some very similar to this http://odyniec.net/articles/multiple-select-fields/ when you will see selected items with ability to remove them

I suggested this in the other question.

$(".myCheckboxClass").click(function() {
  var vals = [];
  $(".myCheckboxClass").each(function() {
    if ($(this).is(':checked') vals.push($(this).val());
  }
  $("#bodyIDList").val(vals.join(", "));
})

this my entire code. As you can see the value of the checkbox is a numeric value and I need the text after it
for (var i = 0; i < data.recordcount; i++) {
                                                                  
$("#selectedList").append('<div>');
$("#selectedList").append('<label></label>');
$("#selectedList").append('<input type=checkbox name=body class="myCheckboxClass" value=' + data.data.bodyid + '>');
                                                                  $("#selectedList").append(data.data.bodydata);                                                                                                                              $("#selectedList").append('<br>');
$("#selectedList").append('</div>');
}
                                                            
                                                      
$(".myCheckboxClass").change(function() {

var list = $('#bodyIDList').data('value');
if( $(this).is(":checked") ) {
list.push( $(this).val());
                                                                        
                                                                        
                                                                        $(this).closest("checkbox").clone().appendTo("#selectedListSelected");
                                                                        
                                                                   } else {
                                                                          var index = list.indexOf($(this).val());
                                                                    list.splice(index, 1);
                                                                }
                                                                  $("#bodyIDList").val(list);
                                                            })

is there any updates on this issue

I am in CET and will not be online for another hoour and a half. What is data.data ?

data.data is comming from my ajax call . Ajax return JSON which is the values that i need to fill the required data

Is there any updates?

I have updated the code so it is does show me the list of the selected items. Now the challange is when i do the uncheck along with removal of ID which is happening I need to remove the block from the listing

if( $(this).is(":checked") ) {
                                                                        list.push( $(this).val());
                                                                        var text = $('label[for=' + $(this).val() + ']').text();
                                                                        //alert(text);
                                                                        $("#selectedListSelected").append('<label></label>');
                                                                        $("#selectedListSelected").append('<ul class=options><li onclick="this.parentNode.removeChild(this);">' + text + '</li></ul>');
                                                                        
                                                                   } else {
                                                                          var index = list.indexOf($(this).val());
                                                                    list.splice(index, 1);
                                                                        //$("#selectedListSelected li").parent().remove(this);
                                                                        
                                                                            $(this).closest('ul').remove();
                                                                        
                                                                }

I guess you need to run this code for all checkboxes and only show those which have been selected.

Basically, you should refresh this 'selectedListSelected' everytime you check or uncheck the checkbox

can you update my code . how can I do that

just assign the onclick event to all the checkbox, and at onclick event iterate through all the checkboxes

mplungian has already suggested that here #36484323


$(".myCheckboxClass").click(function() {
  var vals = [];
  $(".myCheckboxClass:checked").each(function() {
     var text = $('label[for=' + $(this).val() + ']').text();
     $("#selectedListSelected").append('<label></label>');
     $("#selectedListSelected").append('<ul class=options><li onclick="this.parentNode.removeChild(this);">' + text + '</li></ul>');
  }
})

i cannot use each because it will also add duplicate items to the running list

it won't, just clear that div before running each

$(".myCheckboxClass").click(function() {
  $("#selectedListSelected").html("");
  $(".myCheckboxClass:checked").each(function() {
     var text = $('label[for=' + $(this).val() + ']').text();
     $("#selectedListSelected").append('<label></label>');
     $("#selectedListSelected").append('<ul class=options><li onclick="this.parentNode.removeChild(this);">' + text + '</li></ul>');
  }
})

when I uncheck the checkbox it does not remove the item form the selectedListSelected

if this is not working check this


$(".myCheckboxClass").click(function() {
  $("#selectedListSelected").html("");
  $(".myCheckboxClass").each(function() {
      if ( $(this).is(':checked') )
      {
        var text = $('label[for=' + $(this).val() + ']').text();
        $("#selectedListSelected").append('<label></label>');
        $("#selectedListSelected").append('<ul class=options><li onclick="this.parentNode.removeChild(this);">' + text + '</li></ul>');
      }
  });
});

Thanks that great. Now as you can see the last line have onclikc event
   $("#selectedListSelected").append('<ul class=options><li onclick="this.parentNode.removeChild(this);">' + text + '</li></ul>');

When this is clicked it does remove the item from there But I also need to update my running list and remove the value from there

how can i also include the label to be removed. also upon removal i need to remove id from the running list

for removing label, make it


$(".myCheckboxClass").click(function() {
  $("#selectedListSelected").html("");
  $(".myCheckboxClass").each(function() {
      if ( $(this).is(':checked') )
      {
        var text = $('label[for=' + $(this).val() + ']').text();
        $("#selectedListSelected").append('<label></label>');
        $("#selectedListSelected").append('<ul class=options><li>' + text + '</li></ul>');
      }
  });
  $(".options li").bind("click", function(){
      e.preventDefault();
       $(this).parent().prev("label").remove(); \\ or just $(this).parent().prev().remove();
       $(this).remove();
      return false;
  });
});

how can I  update the running total? Will unchecking the appropriat checkbox will do the trick

<< how can I  update the running total?>>
Elaborate on it more....Or better please post a separate question for the same

if you look at my previous comments var list = $('#bodyIDList').data('value');

bodyIDList is running total

$(".myCheckboxClass").click(function() {
  $("#selectedListSelected").html("");
  var total = 0;
  $(".myCheckboxClass").each(function() {
      if ( $(this).is(':checked') )
      {
        total += parseInt( $(this).val() );
        var text = $('label[for=' + $(this).val() + ']').text();
        $("#selectedListSelected").append('<label></label>');
        $("#selectedListSelected").append('<ul class=options><li>' + text + '</li></ul>');
      }
  });
  $(".options li").bind("click", function(){
      e.preventDefault();
       $(this).parent().prev("label").remove(); \\ or just $(this).parent().prev().remove();
       $(this).remove();
      return false;
  });
  $("#bodyIDList").val(total );
});

this is not a total this is simply a list of checkboxes value

then make it

$(".myCheckboxClass").click(function() {
  $("#selectedListSelected").html("");
  var total = "";
  $(".myCheckboxClass").each(function() {
      if ( $(this).is(':checked') )
      {
        total += $(this).val() + ",";
        var text = $('label[for=' + $(this).val() + ']').text();
        $("#selectedListSelected").append('<label></label>');
        $("#selectedListSelected").append('<ul class=options><li>' + text + '</li></ul>');
      }
  });
  $(".options li").bind("click", function(){
      e.preventDefault();
       $(this).parent().prev("label").remove(); \\ or just $(this).parent().prev().remove();
       $(this).remove();
      return false;
  });
  $("#bodyIDList").val(total.substring(0, (total.length - 1) ) );
});

how can i uncheck the chckbox for removed item. SO if click on remove in need to uncheck the checkbox.
i added the id to checkbox
can i do something like this $("#" + $(this).val()).removeAttr("checked");

@erikTsomik: Don't mind but your question is taking different turns now...Please open a new question for new problems

I forgot to mention that the main checkboxes are driven by my search routine. So now If I search by new name my listing get cleared because I am clearing it evrytime . If I remove the clearing than than when i uncheck the checkbox I can not remove the particular item

Is there anything pending now? Is your issue resolved?