Question

I’m sooo… close but am stuck on one tiny thing that’s probably really simple for you. The idea is to add the value of each checkbox to the hidden field’s value.

The moment I add a second (or more forms) with their own variable ID’s, it falls apart. I know the first part of the jQuery code works but I don’t know how to get loader_id into here.

$('#fileset-'+ loader_id +' input').click(updateFileField);

I think that is where I’m messing up because if I hard code the id here the rest works beautifully.

The following is the full code and can also be found here

<div id="fileset-1" class="fileset">
<input type="checkbox" value="set1">
<input type="checkbox" value="set2">
<input type="checkbox" value="set3">
</div>  
File 1 <input type="text" val="" id="file-1" class="filestosend" /><br />

<div id="fileset-2" class="fileset">
<input type="checkbox" value="seta">
<input type="checkbox" value="setb">
<input type="checkbox" value="setc">
</div> 
File 2 <input type="text" val="" id="file-2" class="filestosend" />​

Here’s the jQuery portion

 function updateFileField() {

 var allVals = [];
 var loader_id = $(this).parent('div').attr('id').replace('fileset-', '');
     $('#fileset-' + loader_id + ' :checked').each(function() {
       allVals.push($(this).val());
     });         
     $('#file-' + loader_id ).val(allVals);
  }
 $(function() {
     $('#fileset-'+ loader_id +' input').click(updateFileField);

});

Thanks for your help!

Answer 1

Is that you’ve been looking for?

$(".fileset :checkbox").on("change", function() {
    var div = $(this).parent();
    var id = div.attr("id").split("-")[1];
    var values = [];
    div.find(":checked").each(function() {
        values.push(this.value);
    });
    $("#file-" + id).val(values.join(","));
});

DEMO: http://jsfiddle.net/fXMrj/52/