js 脚本怎样实现checkbox的全选，反选，类似邮箱中邮件的全选后删除移动

Posted 2023-05-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 脚本怎样实现checkbox的全选，反选，类似邮箱中邮件的全选后删除移动相关的知识，希望对你有一定的参考价值。

我的checkbox放在gridview第一列中的模板中，在页面的下面有全选，反选的checkbox，当选中全选的checkbox时，gridview中的checkbox全选中

注意代码未整理待修正。不过基本功能是这样的，你也可以自己再改下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> admin control panel</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style>
body
color:#666;
font-family:Tahoma,Verdana,sans-serif,simsun;
font-size:12px;

select, label, textarea, input
font-family:'lucida grande',tahoma,verdana,arial,simsun,sans-serif;

ul
list-style-type:none;
padding:0px;
margin:0px;

h2
color:#526ea6;
font-size:14px;
margin-left:8px;

a
color:#000;

*
margin:0px;padding:0px;

select
border:1px solid #BDC7D8;
padding:2px;
width:100px;

#wrapper
width:95%;
margin:0px auto;
border:5px solid #F0F8FF;

#header
height:80px;

#header h1
padding: 20px 7px 0px;

#header h1 span
color:#FF6347;
font-size:12px;
margin-left:3px;

#mainNav ul
height:35px;
padding-left:10px;
background:#ccc url(f2.gif);
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;

#mainNav li
float:left;

#mainNav li a
font-size:14px;
line-height:35px;
color:#000;
text-decoration:none;
float:left;
display:block;
padding:0px 0px 0px 10px;

#mainNav li a b
display:block;padding:0px 10px 0px 0px;

#mainNav li a:hover, #mainNav li a.current
background:url(frame-mena.gif) left center no-repeat ;

#mainNav li a:hover b, #mainNav li a.current b
background:url(frame-mena.gif) right center no-repeat ;

#contentWrapper
padding:7px;

#ctrlPanl
border:1px solid #ccc;height:30px;line-height:30px;padding:2px

#ctrlPanl #olink
float:left;

#ctrlPanl #olink li
float:left;

#ctrlPanl #olink li a
display:block;
padding:0px 4px;
text-decoration:none;

#content
margin:8px auto;

.gutter table
width:100%;
border-collapse:collapse;
border:1px solid #ccc;

table th
height:30px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
background:#F0F8FF

table tbody td
height:30px;
text-align:center;
border-bottom:1px solid #ccc;

table tbody tr:hover td
background:#F0FFF0;

table tbody tr.select td
background:#F5FFFA;

table tfoot td
height:30px;
background:#F0F8FF

.pagenav
float:left;

.pagenav a, .pagenav span
float:left;display:block;
margin-left:4px;
padding:2px 2px;

#footer

#footer div
color:#666;
padding:7px;

</style>
</HEAD>
<script>
var $ = function(id)
return document.getElementById(id);

function jtable(f, ctrl, chkCallback)
var achkbox = $(f).getElementsByTagName("input");
var ochkbox = [];
var otr = [];
for(var i = 0; i < achkbox.length; i++)
if (achkbox[i].type.toLowerCase() == "checkbox" && achkbox[i].id != ctrl)
ochkbox.push(achkbox[i]);
otr.push(achkbox[i].parentNode.parentNode);

$(ctrl).onclick = function(call)
for(var i = 0; i < ochkbox.length; i++)
if (this.checked)
ochkbox[i].checked = 1;
ochkbox[i].parentNode.parentNode.className = "select";
else
ochkbox[i].checked = 0;
ochkbox[i].parentNode.parentNode.className = "";

chkCallback();

for(var i = 0; i < otr.length; i++)
otr[i].onclick = function()
if (this.x != "1")
this.x="1";
this.className = "select";
this.getElementsByTagName("input")[0].checked = 1;

else
this.x="0";
this.className = "";
this.getElementsByTagName("input")[0].checked = 0;

otr[i].onmouseover = function()
if(this.x != "1")
this.style.background = "#F5F5F5";
else
this.style.background = "";

otr[i].onmouseout = function()
if(this.x != "1")
this.style.background = "";

function Observer()

Observer.prototype.update = function(arg)
return;

//Subject class construct
function Subject()
this.Observers = [];

//Subject prototype methods
Subject.prototype =
notify:function(context)
for(var i = 0; i < this.Observers.length; i++)
this.Observers[i].update(context);

,
addObserver:function(obj)
this.Observers.push(obj);

Object.extend = function(d,s)
for(p in s)
d[p] = s[p];

return d;

function deleteObserver()
Object.extend(deleteObserver, Observer);
deleteObserver.update = function(num)
if (num)

document.getElementById("dbtn").style.color="#000";
else
document.getElementById("dbtn").style.color="#999";

var tt = 4;
function chkIsAll();
chkIsAll.update = function(num)
if (num == 0)

$("chkboxCtr").checked = 0;

if (num == 4)

$("chkboxCtr").checked = 1;

var oSub = new Subject();
oSub.addObserver(deleteObserver);
oSub.addObserver(chkIsAll);

var chkbox =
chkState:,
check:function(name)
var aChkbox = document.getElementsByTagName("input");
var tCount = 0;
for(var i = 0; i < aChkbox.length; i++)
if (aChkbox[i].type == "checkbox" && aChkbox[i].name == name &&aChkbox[i].checked)

if (!chkbox.chkState[name])

chkbox.chkState[name] = 0;
tCount += 1;
else
tCount += 1;

if (tCount != chkbox.chkState[name])

oSub.notify(tCount);
chkbox.chkState[name] = tCount;

</script>
<BODY>
<div id="wrapper">
<div id="header"><h1>oweb for your easier online life<span>(重庆大学版)</span></h1></div>
<div id="mainNav">
<ul>
<li><a href="#" onfocus="this.blur()"><b>管理首页</b></a></li>
<li><a href="#" onfocus="this.blur()" class="current"><b>产品</b></a></li>
<li><a href="#" onfocus="this.blur()"><b>文章</b></a></li>
<li><a href="#" onfocus="this.blur()"><b>图片</b></a></li>
<li><a href="#" onfocus="this.blur()"><b>文件</b></a></li>
<li><a href="#" onfocus="this.blur()"><b>留言</b></a></li>
<li><a href="#" onfocus="this.blur()"><b>设置</b></a></li>
</ul>
<div style="clear:both"></div>
</div>
<div id="mainContent">
<div id="contentWrapper">
<h2 style="margin:4px auto">产品管理/书籍</h2>
<div id="ctrlPanl">
<div id="olink">
<ul>
<li><a href="#" style="color:#999" id="dbtn">删除</a></li>
<li><a href="#">添加新产品</a></li>
<li><a href="#">管理分类</a></li>
</ul>
</div>
</div>
<div style="clear:both"></div>
<div id="content">
<div class="gutter">
<form id="pForm" action="<$config.baseURL>/product/" method="post" >
<table>
<thead>
<tr>
<th><input type="checkbox" id="chkboxCtr" name="ctrl"/></th>
<th>ID</th>
<th>产品名</th>
<th>所属分类</th>
<th>产品图片</th>
<th>产品添加时间</th>
<th>是否显示</th>
<th>是否推荐到首页</th>
</tr>
</thead>
<tbody>
<tr class="select">
<td><input type="checkbox" value="" name="id" onclick="javascript:chkbox.check('id')"/></td>
<td>1</td>

<td>联想天逸电脑</td>
<td>电脑</td>
<td><img src="pt.gif" height="30px"/></td>
<td>2008-10-10</td>
<td><img src="qun_kg_g.gif"/></td>
<td><img src="qun_kg_k.gif"/></td>
</tr>
<tr class="select">
<td><input type="checkbox" value="" name="id" onclick="javascript:chkbox.check('id')"/></td>
<td>2</td>
<td>中华牌沙滩椅</td>
<td>家具</td>
<td><img src="pt.gif" height="30px"/></td>
<td>2008-10-02</td>
<td><img src="qun_kg_g.gif"/></td>
<td><img src="qun_kg_k.gif"/></td>
</tr>
<tr class="select">
<td><input type="checkbox" value="" name="id" onclick="javascript:chkbox.check('id')"/></td>
<td>3</td>
<td>无懈可击web设计</td>
<td>书籍</td>
<td><img src="pt.gif" height="30px"/></td>
<td>2008-02-10</td>
<td><img src="qun_kg_g.gif"/></td>
<td><img src="qun_kg_k.gif"/></td>
</tr>
<tr>
<td><input type="checkbox" value="" name="id" onclick="javascript:chkbox.check('id')"/></td>
<td>4</td>
<td>联想轩逸电脑</td>
<td>电脑</td>
<td><img src="pt.gif" height="30px"/></td>
<td>2008-10-10</td>
<td><img src="qun_kg_g.gif"/></td>
<td><img src="qun_kg_k.gif"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="8"><div class="pagenav"><span>3/5</span><a href="#">首页</a><a href="#">上一页</a><a href="#">下一页</a><a href="#">末页</a></div></td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
</div>
</div>
<div id="footer"><div>copyright©2008 oweb alpha 1.0 test for test</div></div>
</div>
</BODY>
</HTML>
<script>jtable("pForm", "chkboxCtr", function()chkbox.check('id'));</script> 参考技术A 在页眉的checkbox属性中添加这个事件onclick="CheckAllCus()",不过页眉中的checkbox要用html服务器控件.然后在用javascript实现,如下:
<script language="javascript">
function CheckAllCus()

for (var k=0;k<document.Form1.elements.length;k++)

var e = document.Form1.elements[k];
if (e.id!= 'checkAccept')

e.checked = document.Form1.checkAccept.checked;

模板列如下：

<asp:TemplateColumn>
<HeaderTemplate>
<INPUT language="javascript" id="chkAll" onclick="CheckAll(this);" type="checkbox" name="chkAll"> 选择
</HeaderTemplate>
<ItemTemplate>
<INPUT language="javascript" id="checkbox<%#Container.ItemIndex%>" type="checkbox" value="<%#DataBinder.Eval(Container.DataItem,"字段名字")%>" name="VocationId">
</ItemTemplate>
</asp:TemplateColumn>

这里可以

CheckAll函数如下,记得把函数中的frmList改成你的Form的名字:

function CheckAll(CheckBox)

var i;
var str = new String();
for ( i = 0; i < frmList.length; i++ )

str = frmList.item(i).id;
if ( str.substr(0,8) == "checkbox" )

if (frmList.item(i).disabled != true)

frmList.item(i).checked = CheckBox.checked;
if (CheckBox.checked == true )

//document.all.item("chk" + str.substr(8,9)).className = "";
//document.all.item("chk" + str.substr(8,9)).bgColor ="#ffdfbd";

else

//changeColor(frmList.item(i));

<script language="javascript">
//B100547 chen.p may select or unselect all checkbox
function SelectAll()

var arrInputControls;
arrInputControls = document.Form1.all;
for(i=0;i<arrInputControls.length;i++)

if((arrInputControls(i).tagName.toLowerCase() == "input") && (arrInputControls(i).type) && (arrInputControls(i).type.toLowerCase() == "checkbox") )

arrInputControls(i).checked = document.Form1.chkCheckAll.checked;

</script>

<%@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="BS_Demo.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm2</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
function SelectAll(thisObject)

var tmpTable=thisObject.parentElement.parentElement.parentElement;
var rowsCount=tmpTable.rows.length;
var buttonText=thisObject.value;
var selected=true;
if(buttonText == "本页全选")thisObject.value="清除选择";elsethisObject.value="本页全选";selected=false
var i;
for(i=1;i<rowsCount;i++)

var tmpCell=tmpTable.rows[i].cells[0];
if(tmpCell.childNodes.length>0)

var objCheck = tmpTable.rows[i].cells[0].childNodes[0];
if(objCheck.id.indexOf("ChkSelect")>-1)

objCheck.checked=selected;
//SelectOne(objCheck);

</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DataGrid id="DataGrid1" style="Z-INDEX: 102; LEFT: 264px; POSITION: absolute; TOP: 192px"
runat="server">
<Columns>
<asp:TemplateColumn>
<HeaderTemplate>
<INPUT id="btnSelect" style="FONT-WEIGHT: bold; WIDTH: 56px; CURSOR: hand; COLOR: blue; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 20px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline; BORDER-BOTTOM-STYLE: none"
onclick="SelectAll(this);" type="button" value="本页全选" name="btnSelect">
</HeaderTemplate>
<ItemTemplate>
<INPUT id="ChkSelect" type="checkbox" name="ChkSelect" runat="server" >
</asp:textbox>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</form>
</body>
</HTML>

参考资料：http://hi.baidu.com/livenina/blog/item/22482517eadb3d004b90a774.html

本回答被提问者采纳参考技术B 首先把全部按钮编成数组，然后for each

checkbox的全选反选多选等操作（js）

以下控件的name属性为DEPT_ID
(案例中默认选中的checkbox，全选或者反选，对该控件无影响)
//1.全选

function selectAllRight(){

$("input[name=‘DEPT_ID‘").each(function() {

$(this).prop("checked", true);

});

}

//2.反选
function reverseSelectRight(){
    $("input[name=‘DEPT_ID‘").each(function() {
    //若当前选项没被选中，则设置为选中
    if(false == $(this).is(‘:checked‘)){
        $(this).prop("checked", true);
    }else{
    //若当前选项选中，但是不是为disabled的话，则设置为取消选中
    if(false == $(this).prop("disabled")){
        $(this).prop("checked", false);
    }}}); }

//3.进行选择控制，当且仅当只允许选择一个。
$("input[name=‘DEPT_ID‘]").click(function() {
$("input[name=‘DEPT_ID‘").each(function() {
//若当前当前不为disable，并且被选中，则取消选中
if(true ==$(this).is(‘:checked‘)){
if(true == $(this).prop("disabled")){
    $(this).prop("checked", true);
}else{
    $(this).prop("checked", false);
}}});
//当前设置选中状态
    $(this).prop("checked", true);
});

//4.重置
function abandonSelectRight(){
    //获取所有被选中的部门
        $("input[name=‘DEPT_ID‘").each(function() {
    //若当前选项没被选中，则设置为选中
    if(true == $(this).is(‘:checked‘)){
    //若当前选项选中，但是不是为disabled的话，则设置为取消选中
    if(false == $(this).prop("disabled")){
        $(this).prop("checked", false);
    }}
    });
}

控件：
<label><input name="DEPT_ID" type="checkbox" value="100100" />控件1 </label>

本文出自 “雷氏出品” 博客，请务必保留此出处http://leoky.blog.51cto.com/752840/1871889

以上是关于js 脚本怎样实现checkbox的全选，反选，类似邮箱中邮件的全选后删除移动的主要内容，如果未能解决你的问题，请参考以下文章

纯js实现checkbox的全选反选全不选

js--checked的全选，反选，点击子的checkbox改变父的checkbox状态

checkbox的全选反选多选等操作（js）

JS如何实现对name是数组的复选框的全选和反选以及取消选择？ form内容如下：

jQuery实现checkbox的全选和反选

如何实现复选框的全选和取消全选效果