Jquery append value from the checked checkboxes

erikTsomik
erikTsomik used Ask the Experts™
on
I my app i have search textbox .When I type something in will produce the list
of names along with checkboxes. upon clicking on the checkbox I want
to append the value of the checkbox to the hidden form variable.

As i type second time I I get a different list it add more options .

My code is here
 var output = '';
$(".myCheckboxClass").change(function() {
											
   											 $('input[type="checkbox"]:checked').each(function(index) {
    output += $(this).val() + ", ";
  });

   $("#bodyIDList").val(output );
        })

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michel PlungjanIT Expert
Top Expert 2009

Commented:
And what is the problem?
erikTsomikSystem Architect, CF programmer

Author

Commented:
The problem is how do I remove those values from the list when the ckeckbox in unchecked
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Try something like this (not tested)

$(".myCheckboxClass").click(function() {
  var vals = [];
  $(".myCheckboxClass").each(function() {
    if ($(this).is(':checked') vals.push($(this).val());
  }
  $("#bodyIDList").val(vals.join(", "));
})
Better way use javascript.
Just call function on click of checkbox.

In that function take an array (like in javascript). Then first check if that string (checkbox value) is already in array or not by using indexOf().

see:

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf

Also refer this for other manipulation with javascript array.

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array

Hope this helps you and get out of your small problem. :-)
IT Expert
Top Expert 2009
Commented:
jQuery IS javascript. If you already use it, it is in most cases making your life a lot easier, assuming you can get to grips with the syntax.

The jQuery I posted would look like this in plain JS

window.onload=function() {
  getCheck(true); // 
}
function getCheck(isInit) {
  var inputs = document.getElementsByTagName("input");
  var vals = [];
  var inp;
  for (var i=0, n=inputs.length;i<n;i++) {
    inp = inputs[i]; 
    if (inp.className.indexOf("myCheckboxClass") !=-1) {
      if (isInit) {
        inp.onclick=function() {
          getCheck(false);
        }
      }
      if (inp.checked) vals.push(inp.value)
    }
  }
  document.getElementById("bodyIDList").value=vals.length>0?vals.join(", "):"";
}

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial