javascript 全选与反选
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// --列头全选框被单击---
function ChkAllClick(sonName, cbAllId) {
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
var tempState = cbAll.checked;
for (i = 0; i < arrSon.length; i++) {
if (arrSon[i].checked != tempState)
arrSon[i].click();
}
}
// --子项复选框被单击---
function ChkSonClick(sonName, cbAllId) {
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
for (var i = 0; i < arrSon.length; i++) {
if (!arrSon[i].checked) {
cbAll.checked = false;
return;
}
}
cbAll.checked = true;
}
// --反选被单击---
function ChkOppClick(sonName) {
var arrSon = document.getElementsByName(sonName);
for (i = 0; i < arrSon.length; i++) {
arrSon[i].click();
}
}
function AddTOWISH(sonName) {
var arrSon = document.getElementsByName(sonName);
var wishlist = document.getElementById("wishlist");
var ps = document.getElementById("wishlist").getElementsByTagName("p");
for (var j = 1; j<ps.length; j) {
var history = document.getElementById("history");
history.appendChild(ps[j]);
}
for (var i = 0; i < arrSon.length; i++) {
if (arrSon[i].checked) {
var ele = document.createElement("p");
var text = document.createTextNode(arrSon[i].value);
ele.appendChild(text);
wishlist.appendChild(ele);
}
}
}
</script>
<style type="text/css">
#Button1
{
height: 42px;
width: 179px;
}
#Checkbox1
{
height: 25px;
width: 26px;
}
</style>
</head>
<body>
<div id="content">
<div id="left">
<ul>
<li><a><strong>安全类</strong></a></li>
<ul>
<li><a>金框类</a></li>
<li><a>塑框类</a></li>
</ul>
<li><a>运动类</a></li>
<li><a>时尚金框类</a></li>
<li><a>时尚塑框类</a></li>
<li><a>儿童类</a></li>
<li><a>老花类</a></li>
<li><a>光学射出类</a></li>
<li><a>光学板材类</a></li>
<li><a>光学金框类</a></li>
<li><a>光学性眼镜</a></li>
</ul>
</div>
<div id="middle">
<form runat="server">
<INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选
<INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选
<input type="button" id="add" name="add" onclick="AddTOWISH('chkSon')" value="add"/>
<br />
<%for (int i = 0; i < 10; i++)
{%>
<INPUT name="chkSon" id='chkSon<%=i+1 %>' type="checkbox" value='<%=i+1 %>' onclick="ChkSonClick('chkSon','chkAll')" /><%=i+1 %>
<br />
<%} %>
</form>
</div>
<div id="right">
<div id="wishlist">
<p>本次清单内容:</p>
</div>
<div id="history">
<p>历史清单内容:</p>
</div>
</div>
</div>
</body>
</html>
javascript 全选与反选的更多相关文章
- Javascript全选,反选,全不选的实现代码
使用js实现全选.反选.全不选. 代码如下: <html> <head> <script type="text/javascript"> fun ...
- javascript 全选 反选 js代码
<script type="text/javascript"> //全选function checkAll() { var objs = window.document ...
- JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单
<!DOCTYPE html> <!--示例之模态对话框--> <html lang="en"> <head> <meta c ...
- 用 JS(JavaScript )实现多选、全选、反选
JS小例题 学习内容: 需求 总结: 学习内容: 需求 用 JavaScript 实现全选.反选.多选 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- checkbox 全选,反选 ,全不选
在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对 ...
- jQuery全选与反选,且解决点击只执行一次的问题
<html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript ...
- Jquery 全选、反选问题解析
最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...
- Checkbox 全选、反选
1.全选.反选 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></t ...
- Jquery全选与反选checkbox(代码示例)
今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...
随机推荐
- PyCharm设置字体
pycharm 是很好的一个IDE,就是默认字体太小了,真的太小了,改字体的地方很隐晦.找了半天,贴图: 然后发现size 不能更改,所以,点击save as创建一个方案,然后修改自己的方案.这个时候 ...
- jdbc详解(三)
开源数据库连接池 l 现在很多 WEB 服务器 ( Weblogic , WebSphere , Tomcat) 都提供了 DataSoruce 的实现,即连接池的实现.通常我们把 DataSourc ...
- hdu 5199 Gunner(STL之map,水)
Problem Description Long long ago, there is a gunner whose name is Jack. He likes to go hunting very ...
- 【floyd存字典序路径】【HDU1385】【Minimum Transport Cost】
题目大意 求多组i到j的最短路径 并输出字典序最小.... 现在只会floyd的方式 利用dis[i][j] 表示i到j的路径中i 后面的节点 更新是比较dis[i][j] dis[i][k]. 记住 ...
- 一点用JS写控制权限的心得
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- C#4 for循环 迭代法 穷举法应用
for()循环. 四要素: 初始条件,循环条件,状态改变,循环体. 执行过程: 初始条件--循环条件--循环体--状态改变--循环条件.... 注意:for的小括号里面分号隔开,for的小括号后不要加 ...
- CSS中字体尺寸总结
下面是我总结的css中关于字体尺寸的知识,欢迎高手拍砖! 前端开发过程中,我们经常会遇到设置某个div固定显示几行文本:这时我们需要精确计算每个字号字体的宽度和高度. 下面是w3school中描述的尺 ...
- vim下高级操作以及文本替换命令
关于vim的一些基本和高级的操作 可参考下面的链接. http://coolshell.cn/articles/5426.html 在使用vim编辑文本的时候涉及到批量替换文本内容 :s/vivian ...
- [linux]segvcatch简单使用
https://code.google.com/p/segvcatch/ This is a crossplatform C++ library designed to convert a hardw ...
- JNDI support differences between Tibco EMS and ActiveMQ
Introduction Recently our team was working on Veracity Quick Start sprint, when I was trying to migr ...