IE 7 not selecting all rows generated by Php and called with jquery function

Hey all, I have a form that is created by php. It contains all the users incoming emails. Each row has a checkbox, along with all the other user info. Firefox works like a charm, but IE has trouble selecting all the checkboxes. Only the first 2 get selected????? The structure is like so:

PHP and HTML code:

$this->requestsMail .='<form name="selectDelete" class="selectDelete">
<table id="inboxTable" class="txt13" width="800px">
<tr><th align="left" style="text-decoration:underline"><input type="checkbox" name="selectAll" class="selectAll"/></th>
    <th style="text-decoration:underline">From</th><td width="20px"></td><th style="text-decoration:underline">Subject
    </th><td width="20px"></td>
    <th style="text-decoration:underline">Date</th><td width="20px"></td>
    <th style="text-decoration:underline">Action</th></tr>';

    $classCounter=0;
while($info=mysql_fetch_array($result)){
    $sender=$info['sender'];
    $date=date("m/d/y- h:i:s A",$info['date']); //takes timeStamp in db & converts to m/d/y - time
    $subject=$info['subject'];
    $message=$info['message'];
    $id = $info['id'];


    $this->requestsMail .='
    <tr>
    <td width="20px"><input type="checkbox" name="delID" class="delID" value="'.$id.'"/></td>
    <td align="center" width="150px"><a href="profile.php?username='.$sender.'">'.substr($sender,0,18).'</a></td>
    <td width="20px"></td>
    <td align="left" width="100px" height="20px">'.substr($subject,0,18).'</td>
    <td width="20px"></td>
    <td align="center" width="150px">'.$date.' - '.$hours.'</td>
    <td width="20px"></td>
    <td width="100px">
    <a href="#" class="showMail">read</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr>
<td colspan="7">
<div class="displayMail" style="display:none; margin:10px 60px 10px 80px" >

    <!--Display user message-->
    <div align="left" class="mainContent">
        <div align="center" id="postContent">                        
            <table id="userPost" width="590px">
                <tr>
                    <td width=100>'.$dbConn->getUserSimplePic($sender).'</td>
                    <td>
                        <div style="text-align:right; margin:0px 25px 15px 0px;"<span class="smallTxt"><a href="'.$id.'" class="delMail">Delete</a></span></div>
                        <div class="message" style="margin:5px 15px;">'.$message.'</div>
                        <div class="sender" style="text-align:right; margin:15px 50px 0px 50px;">-<span class="smallTxt"> '.$sender.' @ '.$date.'<div><a href="#" class="replyLink">reply</a></div></span></div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div><!--end displayMail-->

</td></tr>
    <!-- Confirm delete?-->
    <tr><td colspan="7" align="center"><div class="confirmDelete" style="display:none; margin-bottom:50px; color:#ff8c00; font-size:18px;">
        Delete this email:&nbsp;&nbsp;<a href="inbox" class="delLinkYes" title="Delete email!">Y</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="delLinkNo" title="Do not delete.">N</a> ?
    </div></td></tr>

<tr>
    <td colspan="7">
        <div class="replyDiv" align="center" style="display:none; margin:10px 60px 10px 10px;">

            <form width="350px" class="userReplyForm" name="userReplyForm" method="post" action="#">
            <input type="hidden" class="date" name="date" value="'.time().'"/>
            <input type="hidden" class="sender" name="sender" value="'.$username.'"/>
            <input type="hidden" class="recipient" name="recipient" value="'.$sender.'"/>
            <table align="center" width="350px" class="smallTxt userDetails">
                <tr>
                    <td align="left" width="350px"><input type="text" class="subject" name="subject" size=30 value="RE:'.$subject.'"/></td></tr>
                <tr>
                    <td width="350px"><textarea rows="6" cols="42" class="message" name="message"></textarea></td></tr>
                <tr>
                    <td align="center"><input type="submit" name="Submit" class="submitBtnSmallLong" value="Send Reply"/></td></tr>
            </table>
            </form>

        </div>
        <div class="emailSent" align="center" style="display:none; margin:10px 60px 10px 10px; color:blue; font-size:18px;">
        </div>
    </td>
</tr>

    ';
$classCounter = $classCounter + 1;
}

      $this->requestsMail .='       
      <tr>
        <td colspan="2"><input type="button" class="submitBtnSmallXtraLong" value="Delete selected" name="delSelectedSentMail" /></td>
        <td><input type="hidden" class="inboxOutbox" value="inbox"/></td>
        <td colspan="3"><div id="delStatus"></div></td></tr>
      </table></form><br/><br/><!--<div class="dashed"></div>-->'; 

Then I use jQuery to let the user select which emails to delete, either: 1.) Individually by record OR 2.) By clicking on the checkbox contained in the "th" tag, which is "supposed" to select ALL the other checkboxes.

The problem is that everything works fine in Firefox, but IE has trouble in selecting all the rows. Only the first 2 checkboxes (the one contained in "th" tag & the first record) respond to the select all function. The rest do not get selected. I gave each input a class and not an ID, so this should not cause the issue. Any ideas why IE behaves like this????

Note: I can select the checkboxes individually, but not all at once in IE.

jquery code:

        $(".selectAll").unbind("click").click(function(e){//Method to get ALL checkboxes at once
        var parentForm = $(this).closest("form"); //get current form handle
        var bool = $(this).is(":checked"); //gets whether selected or not
        //var listSent = new Array();
        var listSent = [];

        $(function(){ //check or uncheck based on root checkbox status
            $(parentForm).find("input:checkbox").attr("checked", bool); //have to use parentFormHandle otherwise goes into next form

            if(bool === true){
            $(parentForm).find(".delID").each(function(index,element){ //uses parentForm to restrict to current working form
                listSent.push( $(this).val());
            }); }

            //display all values in array
            $(".submitBtnSmallXtraLong").unbind("click").click(function(a){
                var selectedBox = $(this).closest("tr").find(".inboxOutbox").val(); //are we to delete from inbox or outbox?
                var delStatHandle = $(this).closest("tr").find("#delStatus");   //handle for delStatus 
                    //alert(selectedBox); return false;

                if(listSent.length >= 1){
                        $(".submitBtnSmallXtraLong").css("background-color","#cccccc").attr("disabled",true);

                        var dataString = "data=" + listSent + "&messageType=" + selectedBox;
                            $.ajax({
                                type: "POST",
               开发者_如何学Go                 url:  "ajaxDelSentMailBatch.php",
                                data:  dataString,
                                dataType: "JSON",
                                cache: false,
                                success: function(data){ 
                                    if(data == "true"){//tell user deletion successful
                                        $(delStatHandle).append("Deleted!").fadeIn("slow");
                                        setTimeout(function(){
                                            $(delStatHandle).fadeOut("slow");
                                            location.reload();
                                        },800); 
                                        $(".submitBtnSmallXtraLong").css("background-color","#cecece").attr("disabled",false);
                                    }else{
                                    $("#delStatus").append("Failed to Delete Email/s!").fadeIn("slow");
                                        setTimeout(function(){
                                            $(delStatHandle).fadeOut("slow");
                                            location.reload();
                                        },800); 
                                    $(".submitBtnSmallXtraLong").attr("disabled",false);
                                    }
                                }
                            });

                }
            });

        });
    });

Any suggestions why IE is acting up?

My Not Answer

Write it so that if IE6 is detected, jquery displays a page on how to quickly upgrade to firefox or chrome. Or if the user really want's to stay with IE, you can include a link there too. As developers, we should not promote the continued use of such outdated browsers, especially when they are freely available to upgrade. Sometimes we should educate users, not enable them. ;)

My Real Answer

I created a BASIC checkbox selector. Works great in FireFox (among others). but it won't work in IE6. So I did some digging and found the following statment:

It seems a checkbox doesn't keep it's state after it is appended to another element.

After a little more digging, here is what I found: http://bugs.jquery.com/ticket/769

Turns out it is a bug in IE and doesn't look like it will be fixed. (Especially since it is not being supported any more).

So now my real answer? Refer to My Not Answer. ;)