复选框不确定选择-js实现

最近在扩展《选修课系统》的一个功能——老师添加学生指标(教师持有给自己课程添加学生的指标)时，试写了一个小功能，总结一下。

如下图界面为老师添加学生指标界面；查询出本学期教师自己所教课程，再查询出所要添加的学生 分别选中后，点击"添加"按钮，即可给该学生授课。

想达到的效果：可选择该教师多门课程，给这些课程添加多个学生；

预想如何实现：使用数组，将选择的课程和学生分别放在数组中；

操作中可能存在的问题：选择课程和学生的不确定因素，即：选择了课程1、课程2、课程3后又取消选择课程1/课程2/课程3，选择了学生1、学生2后，又取消选择课程1/课程2——数组如何控制 下面内容给出解释

这次使用的是js实现

界面：

前台：

<!--韩学敏 2014-03-04-->
                        <tr align="center">            
                           <!--隐藏 ‘考试ID’-->
                            <input type="hidden" id='<%#Eval("CourseID")%>'/> 
                            <input type="hidden" id='<%#Eval("CourseName")%>'/> 
                            <td><input type="checkbox" id="chkSelectCourse" value='<%#Eval("CourseID") %>' onclick="javascript:ChooseChkSelectCourse(this,'<%# Eval("CourseName")%>');"> </td>       

                            <td><%#Eval("SchoolYear")%></td>
                            <td><%#Eval("Semester")%></td>
                            <td><%#Eval("CourseCode")%></td>
                            <td><%#Eval("CourseName")%></td>
                            <td><%#Eval("CourseCategoryName")%></td>
                            <td><%#Eval("CourseTeacherCount")%></td>                      
                        </tr>

<tr align="center">   
                            <%--<td><asp:CheckBox ID="chkSelectStu" runat="server" /></td>  --%>
                            <!--隐藏 ‘学生ID’-->
                            <input type="hidden" id="<%#Eval("StudentID")%>"/>
                            <td><input type="checkbox" id="chkSelectStu" value='<%#Eval("StudentID") %>' onclick="javascript:ChooseChkSelectStu(this);"> </td>             
                            <td><%#Eval("StudentCode") %></td>
                            <td><%#Eval("StudentName") %></td>
                            <td><%#Eval("Sex") %></td>
                            <td><%#Eval("ExecutiveClassName") %></td>
                            <td><%#Eval("GradeName") %></td>
                            <td><%#Eval("DepartmentName") %></td>
                            <td><%#Eval("CollegeName") %></td>
                        </tr>

代码解释：

<span style="font-family:KaiTi_GB2312;font-size:18px;">  <td><input type="checkbox" id="chkSelectCourse" value='<%#Eval("CourseID") %>' onclick="javascript:ChooseChkSelectCourse(this,'<%# Eval("CourseName")%>');"> </td> </span>

解释：点击课程复选框(选择/取消选择)时，触发js函数ChooseChkSelectCourse(obj,CourseName)

<span style="font-family:KaiTi_GB2312;font-size:18px;"><td><input type="checkbox" id="chkSelectStu" value='<%#Eval("StudentID") %>' onclick="javascript:ChooseChkSelectStu(this);"> </td>             </span>

解释：点击学生复选框(选择/取消选择)时，触发js函数ChooseChkDSKSelectStu(obj)

js代码：

<span style="font-family:KaiTi_GB2312;font-size:18px;">var arrayCourseID = new Array();//创建数组，存放选中课程行的课程ID
var arrayCourseIDLength = arrayCourseID.length;//存放选中课程行的数组长度
arrayCourseIDLength = 0;

var arrayCourseName = new Array();//创建数组，存放选中课程行的课程名称
var arrayCourseNameLength = arrayCourseName.length;//存放选中课程行的数组长度
arrayCourseNameLength = 0;

var arrayStudentID = new Array();//创建数组，存放选中学生行的学生ID
var arrayStuIDLength = arrayStudentID.length;//存放选中学生行的数组长度
arrayStuIDLength = 0;

var flag = false;

//选中某行课程时，对应的函数
function ChooseChkSelectCourse(obj,courseName) {
    //1,如果选中了该课程
    if (obj.checked) {
        var courseID = obj.value;//获取该行的值(课程ID)

        arrayCourseIDLength = arrayCourseIDLength + 1;//存放课程ID的数组长度+1
        arrayCourseID[arrayCourseIDLength - 1] = courseID;//将选中行的课程ID放入数组arrayStudentID

        arrayCourseNameLength = arrayCourseNameLength + 1;//存放课程名称的数组长度+1
        arrayCourseName[arrayCourseNameLength - 1] = courseName;//将选中课程行的课程名称加入数组arrayCourseName     
    }
    //1,如果取消选中该课程
    if (!obj.checked) {
        var cancelCourseID = obj.value;//获取取消行的课程ID
        //循环存放选中课程的数组arrayCourseID
        for (var i = 0; i < arrayCourseID.length; i++) {
            if (arrayCourseID[i] == cancelCourseID) { //如果arrayCourseID[i]的值=取消选中行的课程ID
                var count = i; //定义变量count
                //循环遍历数组arrayStudentID中第i+1个元素——最后一个元素
                for (var j = count; j < arrayCourseID.length; j++) {
                    arrayCourseID[j] = arrayCourseID[j + 1];//因为取消了arrayCourseID[i]的值，所以需要将arrayCourseID[i+1]——arrayCourseID[arrayCourseID.length-1]的值往前移
                    arrayCourseName[j] = arrayCourseName[j + 1];//因为取消了arrayCourseName[i]的值，所以需要将arrayCourseName[i+1]——arrayCourseName[arrayCourseName.length-1]的值往前移

                    var a = arrayCourseID[i];//测试
                    a = arrayCourseID[i - 1];
                    var b = arrayCourseName[i];//测试
                    b = arrayCourseName[i];
                }
            }
        }
        arrayCourseIDLength = arrayCourseIDLength - 1;//存放课程ID的数组arrayCourseID长度-1
        arrayCourseNameLength = arrayCourseNameLength - 1;//存放课程名称的数组arrayCourseName的长度-1   
    }
}

//选中某行学生时，对应的函数
function ChooseChkSelectStu(obj) {
   //1,如果选中了该学生
    if (obj.checked) {
        var valStuID = obj.value;//获取该行的值(学生ID)
        arrayStuIDLength = arrayStuIDLength + 1;//存放学生ID的数组长度+1
        arrayStudentID[arrayStuIDLength - 1] = valStuID;//将选中行的学生ID放入数组arrayStudentID
    }
    //1,如果取消选中该学生
    if (!obj.checked) {
        var cancelStuID = obj.value;//获取取消行的学生ID
        //循环存放选中学生的数组arrayStudentID
        for(var i=0;i<arrayStuIDLength;i++){
           if(arrayStudentID[i]==cancelStuID){ //如果arrayStudentID[i]的值=取消选中行的学生ID
               var count = i; //定义变量count
               //循环遍历数组arrayStudentID中第i+1个元素——最后一个元素
              for (var j = count; j < arrayStuIDLength; j++) {
                  arrayStudentID[j] = arrayStudentID[j+1];//因为取消了arrayStudentID[i]的值，所以需要将arrayStudentID[i+1]——arrayStudentID[arrayStudentID.length-1]的值往前移
               }
           }
        }
        arrayStuIDLength = arrayStuIDLength - 1;//存放学生ID的数组长度-1
    }  </span>
}

解释：原理——以选择/取消学生为例：

（1）定义全局变量：学生数组、学生数组长度变量

（2）触发函数ChooseChkSelectStu(obj)时，先判断是要选择该学生还是要取消选择该学生

（3）如果是选择：学生数组里添加一个元素，学生数组长度变量-+1

（4）如果是取消选择：从取消元素位置开始-数组长度，进行循环，依次向前赋值，即学生数组[i]=学生数组[i+1]——目的：将取消选择的学生从数组中删除，后面的学生向前依次移动；确保既能成功删除选择的学生又能确保数组中无空值

总结：

很多东西在后台可以实现，同样在前台也可实现；后台代码好些，但不能死守陈旧，尝试新的东西提升会更快；