get a list of selected checkboxes using Jquery

I have the set of checkboxes Upon clicking on the checkbox
I need to show selected checkbox.

My code is below
$(".myCheckboxClass").change(function() {
            
                                                                  var list = $('#IDList').data('value');
                                                                  if( $(this).is(":checked") ) {
                                                                        list.push( $(this).val());
                                                                        //$("#selectedListSelected").append('<div>');
                                                                        
                                                                        $(this).closest("div").clone().appendTo("#selectedListSelected");
                                                                   } else {
                                                                          var index = list.indexOf($(this).val());
                                                                    list.splice(index, 1);
                                                                }
                                                                  $("#IDList").val(list);
                                                            })
LVL 19
erikTsomikSystem Architect, CF programmer Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Gurvinder Pal SinghConnect With a Mentor Commented:
you need to do 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>' + text + '</li></ul>');
      }
  });
  $(".options li").bind("click", function(){
      e.preventDefault();
       $(this).remove();
      return false;
  });
});
0
 
Gurvinder Pal SinghCommented:
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);
}
0
 
Michel PlungjanIT ExpertCommented:
Seems related to other posts.

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
erikTsomikSystem Architect, CF programmer Author Commented:
well the problem is when i check 1 checkbox all the checkboxes get clonned and I only need need the one that checked
0
 
Michel PlungjanIT ExpertCommented:
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

0
 
erikTsomikSystem Architect, CF programmer Author Commented:
well there was no answer to that question. I will be deleteting old question.
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
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
0
 
Michel PlungjanIT ExpertCommented:
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(", "));
})

0
 
erikTsomikSystem Architect, CF programmer Author Commented:
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);
                                                            })
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
is there any updates on this issue
0
 
Michel PlungjanIT ExpertCommented:
I am in CET and will not be online for another hoour and a half. What is data.data ?
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
data.data is comming from my ajax call . Ajax return JSON which is the values that i need to fill the required data
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
Is there any updates?
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
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();
                                                                        
                                                                }
0
 
Gurvinder Pal SinghCommented:
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
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
can you update my code . how can I do that
0
 
Gurvinder Pal SinghCommented:
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>');
  }
})
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
i cannot use each because it will also add duplicate items to the running list
0
 
Gurvinder Pal SinghCommented:
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>');
  }
})
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
when I uncheck the checkbox it does not remove the item form the selectedListSelected
0
 
Gurvinder Pal SinghCommented:
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>');
      }
  });
});
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
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
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
how can i also include the label to be removed. also upon removal i need to remove id from the running list
0
 
Gurvinder Pal SinghCommented:
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;
  });
});
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
how can I  update the running total? Will unchecking the appropriat checkbox will do the trick
0
 
Gurvinder Pal SinghCommented:
<< how can I  update the running total?>>
Elaborate on it more....Or better please post a separate question for the same
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
if you look at my previous comments var list = $('#bodyIDList').data('value');

bodyIDList is running total
0
 
Gurvinder Pal SinghCommented:

$(".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 );
});
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
this is not a total this is simply a list of checkboxes value
0
 
Gurvinder Pal SinghCommented:
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) ) );
});
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
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");
0
 
Gurvinder Pal SinghCommented:
@erikTsomik: Don't mind but your question is taking different turns now...Please open a new question for new problems
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
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
0
 
Gurvinder Pal SinghCommented:
Is there anything pending now? Is your issue resolved?
0
All Courses

From novice to tech pro — start learning today.