JSP与JavaScript的综合应用

（1）在一个WEB邮件系统中，当用户打开邮箱的收件夹时，其中的所有邮件标题将在一个网页中列出，
用户可以选中某些邮件，然后对其执行删除、移动等操作。要标识邮件的选中状态，通常都是在每个邮件旁边放置一个复选框，用户选中某个复选框，即表示用户要选中它旁边的邮件。另外，为了方便用户通过一次操作就选中所有的邮件，网页中通常都要放置一个全选复选框，当选中这个全选复选框时，所有的邮件复选框也随之被自动选中，当去掉全选复选框的选中状态时，所有的邮件复选框的选中状态也随之被去掉。要想通过单击图8.5中的“全选”复选框来一次操作就选中所有的邮件，显然需要用一段JavaScript代码来实现。由于邮箱中的邮件数目是不确定的，因此图8.5中的代表每封邮件的复选框的个数也是不确定的，它们通常是由ASP、JSP等服务器端程序动态产生的，在这种情况下，如果为每个复选框都设置一个不同的名称，每个复选框在程序中的引用名称也就各不一样，这样，要通过JavaScript将每个复选框设置为选中状态时，不可能用一段循环代码来统一处理所有的复选框，而要为每个复选框的都编写单独的处理程序代码。较好的做法是为每个复选框都设置一个完全相同的名称，但它们各自的设置值不同，分别代表每封邮件的编号，这样，在JavaScript中就可以用一个数组来访问这些复选框，从而可以使用一段循环语句来对每个复选框进行处理。另外，将每个复选框的名称都设置成一样，也有利于服务器端程序通过简单的代码就可获知客户端所选中的多封邮件。例程8-6是一个模拟图8.5中的“全选”复选框功能的HTML文件，其中的JavaScript代码细节请参看笔者的《JavaScript网页开发》一书。
例程8-6 maillist.html


<script language="javascript">
    function checkAll()
    {
        var count = document.mailForm.mail.length;
        for(var i=0; i<count; i++)
        {
            document.mailForm.mail[i].checked =
                document.mailForm.ifAll.checked;   
        }
    }
</script>  
<form name="mailForm">
    <input type="checkbox" name="mail" value="1">邮件1<br>
    <input type="checkbox" name="mail" value="2">邮件2<br>
    <input type="checkbox" name="mail" value="3">邮件3<br>
    <input type="checkbox" name="ifAll" onclick="checkAll()">全选
</form>


用浏览器直接打开例程8-6所示的maillist.html文件，单击“全选”复选框，可以看到所有其他的复选框也随之被选中。
（2）在实际应用中，某个邮箱的收件夹中可能有多封邮件，也可能只有一封邮件，甚至是一封邮件都没有，而上面的maillist.html文件中的JavaScript代码不能正确处理只有一封邮件和一封邮件都没有的情况。修改maillist.html文件，将其中的与邮件2和邮件3相关的语句注释掉，如下所示：
    …
    <input type="checkbox" name="mail" value="1">邮件1<br>
    <!--<input type="checkbox" name="mail" value="2">邮件2<br>
    <input type="checkbox" name="mail" value="3">邮件3<br>-->
    <input type="checkbox" name="ifAll" onclick="checkAll()">全选
    …
刷新浏览器对maillist.html文件的访问，单击“全选”复选框，可以看到代表邮件1的复选框并没有随之被选中。修改maillist.html文件，将其中的与邮件1、邮件2和邮件3相关的语句全部注释掉，刷新浏览器对maillist.html文件的访问，单击“全选”复选框，浏览器底部的状态栏中将出现“网页上有错误”的提示信息。显然，上面编写的checkAll函数只考虑到了收件夹中有多封邮件的情况，而没有考虑到只有一封邮件和一封邮件都没有的情况，在实际应用中必须对这些细微的情况进行考虑。如果收件夹中连一封邮件都没有，那么将不会出现名称为“mail”的复选框，对这种情况可以用下面的任何一条语句进行判断：
l         if(document.mailForm.mail == null)
l         if(!document.mailForm.mail)
l         if(typeof(document.mailForm.mail) == "undefined")
如果收件夹中只有一封邮件，那么将只会出现一个名称为“mail”的复选框，这时用在JavaScript代码中的document.mailForm.mail表达式将不是一个数组，即document.mailForm.mail对象中不会length属性，这可以在排除连一封邮件都没有的程序代码的基础上，使用下面的任何一条语句进行判断：
l         if(document.mailForm.mail.length == null)
l         if(!document.mailForm.mail.length)
l         if(typeof(document.mailForm.mail.length) == "undefined")
经过上面的分析，例程8-6中的checkAll函数可以改写成如下形式：
<script language="javascript">
    function checkAll()
    {
        //如果邮箱中存在邮件
        if(document.mailForm.mail != null)
        {
            //如果邮箱中有多封邮件
            if(document.mailForm.mail.length != null)
            {  
                var count = document.mailForm.mail.length;
                for(var i=0; i<count; i++)
                {
                    document.mailForm.mail[i].checked =
                        document.mailForm.ifAll.checked;   
                }  
            }
            else    //如果邮箱中只有一封邮件
            {
                document.mailForm.mail.checked =
                    document.mailForm.ifAll.checked;
            }
        }
    }
</script>
用上面的JavaScript代码分别测试maillist.html文件中连一封邮件都没有、只有一封邮件和有多封邮件的情况，可以看到每次单击“全选”复选框都能得到理想的结果。