Solved

get a list of selected checkboxes using Jquery

Posted on 2011-09-04
34
464 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
  • 18
  • 12
  • 4
34 Comments
 
LVL 40

Expert Comment

by:gurvinder372
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
 
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:gurvinder372
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:gurvinder372
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 40

Expert Comment

by:gurvinder372
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:gurvinder372
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:
gurvinder372 earned 500 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:gurvinder372
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:gurvinder372
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:gurvinder372
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:gurvinder372
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:gurvinder372
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:gurvinder372
ID: 36503235
Is there anything pending now? Is your issue resolved?
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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 create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

744 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now