jquery code break if I add a table....anyone can find out why?
<p>I have the following code, WHICH WORKS JUST FINE...WORKS AS I WANT. But if I place my checkboxes in the table, I get an empty array. </p>

<p>Here is the code:</p>

<pre><code>&lt;table border="1"&gt;
    &lt;div id="boxes"&gt;
        &lt;tr&gt;&lt;td&gt;&lt;input type="checkbox"  name="fruit[]" id="id1"  class="box" value="Banana"&gt; Banana &lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;&lt;input type="checkbox"  name="fruit[]" id="id2"  class="box" value="Cherry"&gt; Cherry &lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;&lt;input type="checkbox"  name="fruit[]" id="id3"  class="box" value="Strawberry"&gt; Strawberry &lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;&lt;input type="checkbox"  name="fruit[]" id="id4"  class="box" value="Orange"&gt; Orange &lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;&lt;input type="checkbox"  name="fruit[]" id="id5"  class="box" value="Peach"&gt; Peach &lt;/td&gt;&lt;/tr&gt;
    &lt;/div&gt;
&lt;/table&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;div id="chekcAll"&gt;
    &lt;input type="button" id="checkThem" value="Check All Checkboxes"&gt;
&lt;/div&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;form id="myForm" action="2.php" method="post"&gt; 
    &lt;input type="hidden" id="actualvalue" name="actualvalue" /&gt;
    &lt;input type="submit" id="groupdelete" value="clickme"  disabled="disabled"/&gt;
&lt;/form&gt;
&lt;script src="jquery-1.7.1.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).ready(function(){
        // this function enable or disable the button on click on the checkboxes
        $(".box").click(function(){
            if($('.box').is(':checked'))  {     
                $('#groupdelete').removeAttr("disabled")
            } else {
                $('#groupdelete').attr('disabled', 'disabled');
            }
        })

        // this is the function for checking/unchecking all checkboxes with the button   
        $('#checkThem').on('click', function(){
            var $boxes = $("input[type='checkbox']"),
            $unselected = $boxes.not(function(){ 
                return this.checked;
            });
        // if there are any unselected boxes, it selects all, else it deselects all
            $boxes.prop('checked', $unselected.length &gt; 0);
        })

        // this function toggle the Check All Checkboxes button label
        $('#checkThem').click(function() {
            if ($(this).val() == "Check All Checkboxes") {
                $(this).val("Uncheck All Checkboxes");
                $('#groupdelete').removeAttr("disabled")
            } else {
                $(this).val("Check All Checkboxes");
                $('#groupdelete').attr('disabled', 'disabled');
            }
        });

        // this function send the array to the php page when submit button is clicked
        $("#myForm").submit(function(e) {    
            var names = [];
            $('#boxes').children('input[name="fruit\[\]"]:checked').each(function() {
                names.push($(this).attr("id")); //it better to pass value by using        $(this).val()
            });    
            $("#actualvalue").val(names.join(","));
            $(this).children('input[name="fruit\[\]"]').attr('disabled','disabled');
        });
    });
&lt;/script&gt;
</code></pre>

<p>If I remove the table arround the checkboxes, code works...that is an array is sent to my page 2.php. Now with the table, I get an empty array. Anyone can shed light on this mystery??</p>

<p>Regards</p>
