JSP列表中复选框批量选择功能实现

在jsp中如何利用checkbox进行批量删除记录~

你给你思路你去做一下，如果不行可以问我，我尽力。 在你得到每个数前前一个

再写一个js.
function getcount(){
var j = 0;
if(form.checkbox.length) {
for(var i=0;i<form.checkbox.length;i++){
if(form.checkbox[i].checked) {
j++;
}
}
} else {
if(form.checkbox.checked) {
j++;
}
}
return j;
}
再在后台用request.getparameterValues("checkbox")操作就可了。如果你是用structs2 的话，更容易，原理一样。方法不是只有这一种，你可以网上找一下。但愿对你有帮助。如有不当，请大家多多指正！祝你好运！

JSP页面代码：

代码如下:



入学批次：<SELECT NAME="grade"
id="grade" onchange="refreshEduLevelAndSpecialAjax();"> //选择入学批次会刷新层次和专业

--请选择--

${gradeInfo.gradeName}


统考课程：<SELECT
NAME="uniExamCourseId" id="uniExamCourseId">

--请选择--

${uniExamCourse.uniExamCourseName}




//设置ID，用于填充层次和专业的下拉框


层 次：<SELECT
NAME="eduLevelId" id="eduLevelId"
onchange="refreshSpecialAjax();"> //选择层次后刷新专业
--请选择--

${educationLevel.educationLevelName}


专 业：<SELECT //设置ID，用于填充专业的下拉框
NAME="specialId" id="specialId">
--请选择--

${special.specialName}









JS的代码如下：

代码如下:


//JavaScript Document
var xmlHttp; //用于保存XMLHttpRequest对象的全局变量
//用于创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
}
}
function refreshEduLevelAndSpecialAjax() {
var grade = document.getElementById("grade").value;
refreshEduLevelAndSpecial(grade);
}
function refreshEduLevelAndSpecial(grade) {
createXmlHttp(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = refreshEduLevelAndSpecialElement; //设置回调函数
xmlHttp.open("POST", "eduLevelAndSpecialByGradeNameInSpecialDetail",
true); //发送POST请求
xmlHttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlHttp.send("grade=" + grade);
}
//处理服务器返回的信息 更新层次专业下拉框
function refreshEduLevelAndSpecialElement() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//此处xmlHttp.responseText是请求的*Controller的某个方法返回的渲染页面的源代码
document.getElementById("refreshEduLevelAndSpecialAjax").innerHTML = xmlHttp.responseText;
}
}
}
function refreshSpecialAjax() {
var grade = document.getElementById("grade").value;
var eduLevelId = document.getElementById("eduLevelId").value;
refreshSpecial(grade, eduLevelId);
}
function refreshSpecial(grade, eduLevelId) {
createXmlHttp(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = refreshSpecialElement; //设置回调函数
xmlHttp.open("POST", "specialByGradeNameAndEduLevelIdInSpecialDetail",
true); //发送POST请求
xmlHttp.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlHttp.send("grade=" + grade + "&eduLevelId=" + eduLevelId);
}
//处理服务器返回的信息 更新专业下拉框
function refreshSpecialElement() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//此处xmlHttp.responseText是请求的*Controller的某个方法返回的渲染页面的源代码
document.getElementById("refreshSpecialAjax").innerHTML = xmlHttp.responseText;
}
}
}


Controller代码：

代码如下:


@RequestMapping(value = "/eduLevelAndSpecialByGradeNameInSpecialDetail")
public ModelAndView getEduLevelAndSpecialByGradeNameInSpecialDetail(HttpServletRequest request,
HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
String gradeName=request.getParameter("grade");
String eduLevelId=request.getParameter("eduLevelId");
if(gradeName==null||gradeName.equals("0")){
gradeName="null";
}
if(eduLevelId==null||eduLevelId.equals("0")){
eduLevelId="null";
}
ArrayList eduLevelList=uess.getEduLevelIdByGradeNameInSpecialDetail(gradeName);
ArrayList specialIdList=uess.getSpecialIdByGradeNameAndEduLevelIdInSpecialDetail(gradeName, eduLevelId);
mav.addObject("educationLevel", eduLevelList);
mav.addObject("specialList", specialIdList);
mav.setViewName("scoreManage/uniExamScore/eduLevelAndSpecialAjax");
return mav;
}
@RequestMapping(value = "/specialByGradeNameAndEduLevelIdInSpecialDetail", method = RequestMethod.POST)
public ModelAndView getSpecialByGradeNameAndEduLevelIdInSpecialDetail(HttpServletRequest request,
HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
String gradeName=request.getParameter("grade");
String eduLevelId=request.getParameter("eduLevelId");
System.out.println("grade:"+gradeName+" eduLevelId:"+eduLevelId);
if(gradeName==null||gradeName.equals("0")){
gradeName="null";
}
if(eduLevelId==null||eduLevelId.equals("0")){
eduLevelId="null";
}
ArrayList specialList=uess.getSpecialIdByGradeNameAndEduLevelIdInSpecialDetail(gradeName, eduLevelId);
mav.addObject("specialList", specialList);
mav.setViewName("scoreManage/uniExamScore/specialAjax");
return mav;
}


后台代码没有给出来，但应该看得懂，就是获取后台数据传到eduLevelAndSpecialAjax.jsp和specialAjax.jsp页面。这两个页面用于填充原页面，通过ID来填充相应区域，两个页面代码如下。
eduLevelAndSpecialAjax.jsp辅助页面：

代码如下:

//ID用于填充原页面


层 次：<select
id="eduLevelId" name="eduLevelId" onchange="refreshSpecialAjax();">
--请选择--

${educationLevel.name}


专 业：<SELECT //ID用于填充原页面
NAME="specialId" id="specialId">
--请选择--

${special.name}







specialAjax.jsp辅助页面：

代码如下:

专 业：<SELECT
NAME="specialId" id="specialId"> //ID用于填充原页面
--请选择--

${special.name}

1、 实现的方法往往就是在每条记录前面加一个复选框，然后在列表下方放置一个“全选/
全不选”复选框。
2、 当选中“全选/全不选”复选框后，列表中的所有复选框都选中，当取消“全选/全不选”
复选框后，列表中的所有复选框都取消选中。
3、 当列表中的复选框都取消选中后，“全选/全不选”复选框也要取消选中。当列表中的复
选框都选中后，“全选/全不选”复选框也要选中。
4、 得到所有选中记录的值。
这项功能其实也很简单，但往往用的时候都要重新再写一遍，于是把它总结为一个模块，记录下来，以便再用。

（1）首先是在每条记录前加入复选框，该处复选框中的值为“id|username”（示例），即选中此复选框会同时传两个值（传一个值的太简单，就不举例了），中间用|隔开，下面取值时会用到：
<input id="box" name="box" type="checkbox" value="id|username" onclick="checkonebox()"/>

（2）然后在下方加入“全选/全不选”复选框。
<input id="checkall" type="checkbox" value="" onclick="checkall()"/> 全选/全不选

(3)关键实现javascript
//点击"全选/全不选"复选框，如果选中，则选中全部复选框，否则取消选中全部复选框 function checkall() {
var ischecked = document.getElementById("checkall").checked;
if(ischecked) {
checkallbox();
}else {
discheckallbox();
}
}
//选中全部复选框
function checkallbox() {
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
boxarray[i].checked = true;
}
}
//取消选中全部复选框
function discheckallbox() {
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
boxarray[i].checked = false;
}

//点击某个复选框，如果所有复选框都选中，“全选/全不选”复选框也选中 //否则如果所有复选框都取消选中，“全选/全不选”复选框也取消选中 function checkonebox() {
if(isallchecked()) {
document.getElementById("checkall").checked = true;
}
if(isalldischecked()) {
document.getElementById("checkall").checked = false;
}
}

//是否全部选中
function isallchecked() {
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
if(!boxarray[i].checked) {
return false;
}
}
return true;
}
//是否全部没有选中
function isalldischecked() {
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
if(boxarray[i].checked) {
return false;
}
}
return true;
}
//得到选中项的值的集合，结果为“1|小明,2|小王,3|小李”的形式
function getallcheckedvalue() {
var boxvalues = "";
var boxarray = document.getElementsByName("box");
for(var i = 0; i < boxarray.length; i++) {
if(boxarray[i].checked) {
var boxvalue = boxarray[i].value;
if(boxvalues == "") {
boxvalues = boxvalue;
}else {
boxvalues = boxvalues + "," + boxvalue;

} } } return boxvalues;
//如果只需要得到其中选中项的id值的集合，方法如下，得到的值为（1,2,3,…） function getIds() {
var boxvalues = getallcheckedvalue();
var boxvaluesArray = boxvalues.split(",");
var ids = "";
for(var i = 0; i < boxvaluesArray.length; i++) {
var boxvalue = boxvaluesArray[i];
var boxvalueArray = boxvalue.split("|");
var id = boxvalueArray[0];
var username = boxvalueArray[1];
if(ids == "") {
ids = id;
}else {
ids = ids + "," + id;
}
}
return ids;
}

最后，总结步骤：每条记录前加复选框，加“全选/全不选”复选框，调用javascript

---

沽源县13616924032： JSP列表中复选框批量选择功能实现 - ？
汪炉凡乐： 1、 实现的方法往往就是在每条记录前面加一个复选框,然后在列表下方放置一个“全选/ 全不选”复选框.2、 当选中“全选/全不选”复选框后,列表中的所有复选框都选中,当取消“全选/全不选” 复选框后,列表中的所有复选框都取消选中...

沽源县13616924032： 在jsp中如何实现下拉列表中的复选框 - ？
汪炉凡乐： 写个form表单 不是有个name吗 选择哪个就传递哪个参数在form里面action对应的Servlet里面利用String level= request.getParameter(＂level＂); 然后if(level.equals(＂VIP＂)){ } 判断 就可以了

沽源县13616924032： JSP中多个复选框通过一个button全选. - ？
汪炉凡乐： 这个属于客户端脚本问题.通过JavaScript脚本全选比较好. 思路:通过事件,找到需要的checkbox.然后把他们的checked属性设置成true 思路比较简单,下面是怎么实现的问题:function checkAll(name) {var el = document....

沽源县13616924032： jquery怎么实现全选复选框? - ？
汪炉凡乐： $('#checkedAll').click(function(){ if(this.checked){/*对默认是否为选中进行判断*/ // $('[name=checkboxt]:checkbox').attr('checked',true);/*checked为true时为默认显示的状态,为true实现全选功能*/ // }else{ / $('[name=checkboxt]:checkbox').attr('...

沽源县13616924032： 多项选择用jsp技术如何实现几道多选 - ？
汪炉凡乐： name1 name2 name3 name4 用的是html标签的方式哦!可以将其添加到表单form中,在servlet端使用HttpServletRequestInstance.getParameterValues(＂interesting＂);//即参数名 可以获得所有的选中值,为一个String[]~~~~

沽源县13616924032： 如何jsp页面checkbox实现全选 - ？
汪炉凡乐： 全选:$(＂:checkbox＂).attr(＂checked＂,＂checked＂); 全不选:$(＂:checkbox＂).removeAttr(＂checked＂); 反选:$(＂:checkbox:checked＂).removeAttr(＂checked＂);$(＂:checkbox:not(:checked)＂).attr(＂checked＂,＂...

沽源县13616924032： jsp复选框功能怎么实现 - ？
汪炉凡乐： 这个不应该用复选框,应该用单选框,回显的时候如下 >是 否> 大概就是这个意思.

沽源县13616924032： 在JSP中怎么实现多项选择题,可以给以下源代码, - ？
汪炉凡乐： 你说的多项选择题,我是不是可以理解成多选??多选的实现是这样的:第一: 必须将多选框放到form里面.第二: 然后name属性完全一样,value不相同.这样当你提交到Action中的时候,只需要使用request对象获取toselect的值就行了. 第...

沽源县13616924032： jsp如何实现下拉框多选的功能 - ？
汪炉凡乐： 的采用的是javabena+jsp public arraylist selectcourseinfo()throws exception {//下拉框显示课程信息 arraylist list = new arraylist();try {db.open();resultset rs = db.select(select * from courseinfo); while (rs.next()) { list.add(new courseinfo(rs.getint(1), rs....

沽源县13616924032： 复选框(checkbox )如何多个选几个,如有九个复选框,最多选四个,最少选一个 - ？
汪炉凡乐： js获取checkbox对象,value=true就是已经勾选的个数.document.getelementbyname('checkboxName')