Hidden image not being submitted with form

I have a form that displays a number of images. When one of those is clicked, a check mark appears below it. I want to be able to then submit the form and record which of the items have check marks. This all works except when the form is submitted, the check mark fields are not present. Here is the javascript function used to hide/show the check mark image:

<script type="text/javascript">
function ChangeStatus(size, icon) {
  var id = size + '_' + icon;
  if (document.getElementById(id).style.display=='none')
    document.getElementById(id).style.display='block';
  else
    document.getElementById(id).style.display='none';
   
  return false;   
}
</script>

Code (markup):

Here is a subsection of the code I am using:

<form name="input" action="form_test.php" method="post">
  <div><INPUT TYPE="radio" NAME="size" VALUE="16" checked > Sixteen </div>
  <div class="container" style="padding-bottom:30px;">
    <div class="logo-box" style="width:16px; height:16px"> 
      <input type="checkbox" name="first" value="first" onclick="javascript:return ChangeStatus('16','first_check')" /><br />
      <div><input id="16_first_check" type="image" name="first_check"  src="images/mark_check.jpg" style="display:none;" /></div>
    </div>
  </div>

  <input type="submit" value="Submit">
</form> 

Code (markup):

If I show the posted data, it just has
[size] => 16. I need it to also show that the check mark is present. I think it might have to do with the value attribute but I tried just entering value="16" and it still didn't show in the post data.

Can anyone let me know how to fix this?

 

Uhm... are ALL your check boxes inside the same FORM tag?

Though the 'onclick' 1990's style and direct targeting to do CSS' and a simple class swap's job seems a bit wonky. Also if you have multiple images, it might be easier to make the checkboxes return as an array for their names. Of course all those DIV for nothing, lack of LABEL and FIELDSET and other "what's a form" code probably isn't helping matters.

To make a 'working' version I'd need to see a more complete codebase than just this snippet as I suspect there's more wrong than I'm seeing -- and that's bad given how much I see wrong.

 

As far as all of it being in one form, yes, that is the case. I'm not aware of a way to submit two forms at once or how to get data from a second form once the first has been submitted. I've never seen such code but maybe that is the problem.

As for the code, that's pretty much it. I didn't think it necessary to show the body, head and css lines. This is part of a larger project but I stripped it down quite a bit since the other code doesn't make a difference for this example. Running the code as it is fails.

 

With jQuery you can easily detect if a checkbox is checked. The script below shows you how to do this. This should be enough to get you started.

$(function() {
    $('input[type="submit"]', click(function() {
        // get all checkboxes
        $.each('input[type="checkbox"]', function() {
            if($(this).is(':checked')) {
                // do what you want here with checked box
            }else{
                // not checked
            }
        });
    });
});

Code (markup):

 

Thank you for the constructive and helpful reply. I have changed the code and it is working well now.