复选框不确定选择-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>
代码解释:
<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]——目的:将取消选择的学生从数组中删除,后面的学生向前依次移动;确保既能成功删除选择的学生又能确保数组中无空值
总结:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。