1.3 单选按钮组和复选框

单选按钮组是由一组单选按钮组成的，并且在一个单选按钮组中，每次只能有一个单选按钮被选中；复选框由若干选项组成，并且可以在若干选项中选择多个项目。单选按钮组和复选框都是JSP网页中常用的表单元素之一，下面通过几个具体实例介绍单选按钮组和复选框的应用。

实例说明

在编写信息添加模块时，一般都需要对用户输入信息的合法性进行判断。判断用户输入信息的合法性有两种实现方法：一种是在提交表单前，应用JavaScript实现；另一种是用Java代码实现。通常情况下采用前者。在判断用户输入的证件号码是否正确时，就需要根据选择的证件类型进行判断，因为不同的证件，证件号码的位数也不同，例如身份证一般为15位或18位，而学生证一般为7位或8位。运行程序，当用户选择的证件类型为“身份证”后，在“证件号码”文本字段中输入身份证号码，当光标移出该文本字段时，程序将判断用户输入的身份证号码的位数是否正确，如果不正确将给予提示，如图1.17所示。

图1.17 无刷新获取单选按钮的值

技术要点

本实例主要是通过单选按钮组实现的，单选按钮组每次只能有一个单选按钮被选中。单选按钮的属性和事件如表1.7所示。

表1.7 单选按钮的属性及事件

实现过程

（1）在页面中添加“证件类别”单选按钮组，名称为CardType，代码如下：

        <input name="CardType" type="radio" class="noborder" value="身份证" checked>
        身份证&nbsp;
        <input name="CardType" type="radio" class="noborder" value="学生证">学生证

（2）在页面中的适当位置添加“证件号码”文本字段，名称为cardNO，并设置其失去焦点时，调用getVal()函数，根据单选按钮组的值判断输入的证件号码是否正确，代码如下：

        <input name="cardNO" type="text" id="Tel" onBlur="getVal()">

（3）编写自定义的JavaScript函数getVal()，用于根据单选按钮组的值判断输入的证件号码是否正确，这里在对学生证号码是否正确的判断时，只给出两种情况，读者可根据实际情况自行设定，代码如下：

        <script language="javascript">
        function getVal(){                      //判断用户的输入是否合法
            var CardTypeValue;
            for (i=0;i<myform.CardType.length;i++){
            if (myform.CardType[i].checked){
                    ardTypeValue=myform.CardType[i].value;
                    break;                     //使用该语句可以减少不必要的循环次数
            }
            }
            if(CardTypeValue=="身份证"){       //判断身份证的号码格式是否正确
            if(myform.cardNO.value.length!=15 && myform.cardNO.value.length!=18){
                    alert("您输入的证件号码有误！");
                    myform.cardNO.focus();
                    return;
                    }
            }else{
                if(CardTypeValue=="学生证"){   //判断学生证的号码格式是否正确
                    if(myform.cardNO.value.length!=7 && myform.cardNO.value.length!=8){
                        alert("您输入的证件号码有误！");
                        myform.cardNO.focus();
                        return;
                    }
                    }
            }
            }
            </script>

举一反三

根据本实例，读者可以：

在电子商务网站的商品搜索时，为实现多条件搜索应用该技术；

在企业进销存管理系统中的商品销售单查询时应用该技术。

实例说明

在企业办公自动化管理系统中的用户权限通常有两种，一种是超级用户，另一种是普通用户，超级用户拥有管理网站的所有权限，而普通用户只能管理网站的部分内容。因此在网站的权限设置模块中就需要应用单选按钮对普通用户和超级用户的权限分别提供不同的设置。运行本实例，单击“普通用户”单选按钮时，其下方将列出网站的所有管理模块，供管理员为该用户设置管理权限，如图1.18所示，单击“超级用户”单选按钮，显示结果如图1.19所示。

图1.18 选择“普通用户”单选按钮

图1.19 选择“超级用户”单选按钮

技术要点

本实例主要应用JavaScript设置表格的Display样式来实现表格的显示和隐藏。将表格的display样式设置为none，可以控制表格的隐藏，将表格的display样式设置为block，可以显示表格。

注意：由于此处应用的是JavaScript脚本，所以需要注意区分大小写。

实现过程

（1）设置表格id属性值。

        <table width="448" border="0" id="im1">

（2）当选择普通用户时，设置文本字段的属性值。

        <input name="user" type="radio" onClick="im1.style.display='block';" value="0" checked>

（3）当选择超级用户时，设置文本字段的属性值。

        <input type="radio" name="user" value="1" onClick="im1.style.display ='none';">

举一反三

根据本实例，读者可以：

在编写客户管理系统的用户权限设置时，可以应用该技术；

在动态网站的管理员级别设置时，可以应用该技术；

在编写多条件商品信息搜索页面时，可以应用该技术。

实例说明

在开发网络应用程序时经常需要制作在线投票栏目，在添加投票选项时，通常都是逐个进行添加，如果某个选项添写重复或是错误就需要将其删除，再重新添加，这样很不方便。如果可以一次性将全部选项添加到页面中，就会减少很多不必要的麻烦。

本实例将介绍一种动态生成多选投票选项的方法，运行本实例，在“添加投票选项”文本区域中输入参与投票的选项内容，并且每个内容之间以“@”作为分隔符，然后单击“提交”按钮，即可在页面中生成投票选项的内容和复选框，运行结果如图1.20所示。

图1.20 动态生成复选框

技术要点

本实例主要应用split方法将字符串中传递的数据以指定的符号（@）进行分隔，并返回一个数组，然后应用for语句循环读取数组中的数据，最后将数组中的值作为复选框的值。

split方法按指定的分割字符或字符串将字符串内容分割并存放到字符串数组中。其语法如下：

        public String[] split(String regex)

入口参数：regex为指定的字符串分隔符，也可以使用正则表达式来分割字符串。

返回值：字符串数组，它是根据给定正则表达式的匹配拆分此字符串确定的。

抛出异常：

PatternSyntaxException：如果正则表达式的语法无效。

实现过程

（1）创建form表单，向页面中添加文本框，设置“提交”按钮。

（2）获取表单中提交的数据，应用split方法对表单提交的数据进行处理，返回一个字符串数组，应用for语句读取数组中的数据，并把数据作为复选框的值进行输出，程序关键代码如下：

        <%
            String[] votes=String.valueOf(request.getAttribute("votes")).split("@");
            for(int i=0;i<votes.length;i++){
              out.println("<input type='checkbox' name='checkbox' value='votes[i]'>");
              out.println((votes[i]));
              out.println("\n");
            }
        %>

举一反三

根据本实例，读者可以：

在网络调查中应用；

在投票系统管理中应用。