用JS完成复选框checkbox的全选\反选\删除确认
2012-03-13 16:53
253 查看
代码如下:
<SCRIPT LANGUAGE="JavaScript">
<!--
//check函数检测是否选中文章
function check(oj)
{
var d=false; //定义一个标志符
for (var i=0;i<oj.length;i++ )
{
if (oj[i].checked)
{
d=true;
}
}
//用循环判断是否有文章被选中
if (d)
{
var f=confirm("确定要删除所选吗?");//确信是否删除;
if (f)
{
return true; //确信删除;
}
else
{
return false; //不删除;
}
}
else
{
alert("请选择要删除的文章!");//未选中,进行提示
return false;
}
}
//checkall为设置全选
function checkall(oj)
{
for (var i=0;i<oj.length;i++ )
{
oj[i].checked=true;
}
}
//checkback为设置反选
function checkback(oj)
{
for (var i=0;i<oj.length;i++ )
{
if (oj[i].checked)
{
oj[i].checked=false;
}
else
{
oj[i].checked=true;
}
}
}
//-->
</SCRIPT>
<CENTER><H2>文章管理</H2></CENTER>
<TABLE align="center" width="400" border="1">
<FORM METHOD="POST" ACTION="" name="myform" onsubmit="return check(document.myform.del);">
<TR>
<TD><INPUT TYPE="checkbox" NAME="del" value="1"></TD>
<TD>关于大学生的就业问题?</TD>
<TD>编辑</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" NAME="del" value="2"></TD>
<TD>07年师范生不收学费?</TD>
<TD>编辑</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" NAME="del" value="3"></TD>
<TD>人类文明正在遭受到侵犯</TD>
<TD>编辑</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" NAME="del" value="4"></TD>
<TD>古龙小说中的爱情</TD>
<TD>编辑</TD>
</TR>
<TR>
<TD> </TD>
<TD align="center"><INPUT TYPE="button" value="全选" onclick="checkall(document.myform.del)"> <INPUT TYPE="button" value="反选" onclick="checkback(document.myform.del)"> <INPUT TYPE="submit" value="删除"> <INPUT TYPE="reset" value="重选"></TD>
<TD> </TD>
</TR>
</FORM>
</TABLE>
运行效果:
选中两项:
点击反选:
点击全选:
删除确认:
未选择提示:
<SCRIPT LANGUAGE="JavaScript">
<!--
//check函数检测是否选中文章
function check(oj)
{
var d=false; //定义一个标志符
for (var i=0;i<oj.length;i++ )
{
if (oj[i].checked)
{
d=true;
}
}
//用循环判断是否有文章被选中
if (d)
{
var f=confirm("确定要删除所选吗?");//确信是否删除;
if (f)
{
return true; //确信删除;
}
else
{
return false; //不删除;
}
}
else
{
alert("请选择要删除的文章!");//未选中,进行提示
return false;
}
}
//checkall为设置全选
function checkall(oj)
{
for (var i=0;i<oj.length;i++ )
{
oj[i].checked=true;
}
}
//checkback为设置反选
function checkback(oj)
{
for (var i=0;i<oj.length;i++ )
{
if (oj[i].checked)
{
oj[i].checked=false;
}
else
{
oj[i].checked=true;
}
}
}
//-->
</SCRIPT>
<CENTER><H2>文章管理</H2></CENTER>
<TABLE align="center" width="400" border="1">
<FORM METHOD="POST" ACTION="" name="myform" onsubmit="return check(document.myform.del);">
<TR>
<TD><INPUT TYPE="checkbox" NAME="del" value="1"></TD>
<TD>关于大学生的就业问题?</TD>
<TD>编辑</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" NAME="del" value="2"></TD>
<TD>07年师范生不收学费?</TD>
<TD>编辑</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" NAME="del" value="3"></TD>
<TD>人类文明正在遭受到侵犯</TD>
<TD>编辑</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" NAME="del" value="4"></TD>
<TD>古龙小说中的爱情</TD>
<TD>编辑</TD>
</TR>
<TR>
<TD> </TD>
<TD align="center"><INPUT TYPE="button" value="全选" onclick="checkall(document.myform.del)"> <INPUT TYPE="button" value="反选" onclick="checkback(document.myform.del)"> <INPUT TYPE="submit" value="删除"> <INPUT TYPE="reset" value="重选"></TD>
<TD> </TD>
</TR>
</FORM>
</TABLE>
运行效果:
选中两项:
点击反选:
点击全选:
删除确认:
未选择提示:
相关文章推荐
- js操作CheckBoxList实现全选/反选(在客服端完成)
- js在repeater控件内每一行<input type="checkbox"/>实现全选,全不选,然后获取每一行的ID删除
- JS实现CheckBox复选框全选全不选功能
- js javascript 实现复选框全选功能 删除复选框选中项功能
- 比较全的JS checkbox全选、取消全选、删除功能代码
- 用JS实现CheckBox的全选 修改 取消 查询 删除的函数
- 复选框checkbox全选与否js
- JS实现CheckBox复选框全选、不选或全不选功能
- 使用vue.js实现checkbox的全选,和多个的删除
- js 完成checkbox 全选与复选[实例]
- Android开发——listview中嵌套checkBox复选框实现单选、全选删除列表内容
- 点击一个checkbox完成全选和反选功能然后完成多条删除
- JS基础学习篇----JS控制checkbox全选、取消全选、删除功能
- js加载数据列表,以及checkbox复选框全选
- JavaScript学习笔记之js实现复选框checkbox的全选、反选示例
- 前台js 2种 全选和不全选checkbox复选框
- JS 控制复选框 checkbox 的全选、全不选与反选
- JS实现复选框的全选和批量删除功能
- checkbox复选框全选批量删除
- jQuery操作动态生成的Checkbox,完成全选和反选,以删除某一行或几行