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

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

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

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

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

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

这次使用的是js实现

界面:

复选框不确定选择-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>

代码解释:

  <td><input type="checkbox" id="chkSelectCourse" value=‘<%#Eval("CourseID") %>‘ onclick="javascript:ChooseChkSelectCourse(this,‘<%# Eval("CourseName")%>‘);"> </td> 
解释:点击课程复选框(选择/取消选择)时,触发js函数ChooseChkSelectCourse(obj,CourseName)


<td><input type="checkbox" id="chkSelectStu" value=‘<%#Eval("StudentID") %>‘ onclick="javascript:ChooseChkSelectStu(this);"> </td>             
解释:点击学生复选框(选择/取消选择)时,触发js函数ChooseChkDSKSelectStu(obj)

js代码:

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
    }  
}
解释:原理——以选择/取消学生为例:

(1)定义全局变量:学生数组、学生数组长度变量

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

(3)如果是选择:学生数组里添加一个元素,学生数组长度变量-+1

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

总结:

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


复选框不确定选择-js实现,布布扣,bubuko.com

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

上一篇:[给自己扫盲]名词解释——LAMP、MEAN、Web应用框架等


下一篇:linux系统更换阿里云的源安装nginx