?
Solved

get a list of selected checkboxes using Jquery

Posted on 2011-09-04
34
Medium Priority
?
472 Views
Last Modified: 2012-05-12
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);
                                                            })
0
Comment
Question by:erikTsomik
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 18
  • 12
  • 4
34 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36482530
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36482750
Seems related to other posts.

0
 
LVL 19

Author Comment

by:erikTsomik
ID: 36483992
well the problem is when i check 1 checkbox all the checkboxes get clonned and I only need need the one that checked
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36484082
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 36484285
well there was no answer to that question. I will be deleteting old question.
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 36484295
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36484323
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 36484391
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 36486195
is there any updates on this issue
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36486385
I am in CET and will not be online for another hoour and a half. What is data.data ?
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 36486495
data.data is comming from my ajax call . Ajax return JSON which is the values that i need to fill the required data
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 36489074
Is there any updates?
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 36490292
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36490703
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 36490798
can you update my code . how can I do that
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36490968
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 36491016
i cannot use each because it will also add duplicate items to the running list
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36491022
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 36491060
when I uncheck the checkbox it does not remove the item form the selectedListSelected
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36491090
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 36491129
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
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 36493459
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 36493482
how can i also include the label to be removed. also upon removal i need to remove id from the running list
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36493492
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 36493527
how can I  update the running total? Will unchecking the appropriat checkbox will do the trick
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36493555
<< how can I  update the running total?>>
Elaborate on it more....Or better please post a separate question for the same
0
 
LVL 19

Author Comment

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

bodyIDList is running total
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36493614

$(".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
 
LVL 19

Author Comment

by:erikTsomik
ID: 36493622
this is not a total this is simply a list of checkboxes value
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36493631
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 36493643
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36493752
@erikTsomik: Don't mind but your question is taking different turns now...Please open a new question for new problems
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 36495916
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36503235
Is there anything pending now? Is your issue resolved?
0

Featured Post

A new era in Cloud training has arrived.

A day that will go down in Cloud history.. But are you ready for it? Will you accept this Cloud challenge?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question